Edinburgh GEL

Video

Streaming media is an important element of any digital presence.

Video appearance is usually affected by the available media player. Nonetheless, best practice around showing media should be followed at all times.

Accessibility review

Currently untested

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h3>Basic</h3>             
<div class="video-container vid-thumbnail">
  <iframe src="http://www.uwp.is.ed.ac.uk/widgets/embeds/vp.php?t=4&v=PSwItM6ojYI" width="320" height="240" frameborder="0"></iframe>
</div>

<h3>Detailed</h3>
<div class="row">
  <div class="col-sm-6">
    <div class="panel">
      <div class="panel-heading">
      <h3>Video Title</h3>
      </div>
     
      <div class="panel-body">
      <div class="video-container vid-thumbnail">
        <iframe src="http://www.uwp.is.ed.ac.uk/widgets/embeds/vp.php?t=4&v=PSwItM6ojYI" width="320" height="240" frameborder="0"></iframe>
      </div>
     
      <div class="caption">
        <p><small>Thumbnail label for the current video content</small></p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia mi odio, eu convallis est bibendum condimentum. Vestibulum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia mi odio, eu convallis est bibendum condimentum. Vestibulum adipiscing.</p>
      </div></div>
    </div>
    <div class="col-sm-6">
      <div class="panel">
      <div class="panel-heading">
        <h3>Video Title</h3>
      </div>
     
      <div class="panel-body">     
        <div class="video-container vid-thumbnail">
          <iframe src="http://www.uwp.is.ed.ac.uk/widgets/embeds/vp.php?t=4&v=PSwItM6ojYI" width="320" height="240" frameborder="0"></iframe>
        </div>
     
        <div class="caption">
          <p><small>Thumbnail label for the current video content</small></p>
        </div>
     
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia mi odio, eu convallis est bibendum condimentum. Vestibulum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia mi odio, eu convallis est bibendum condimentum. Vestibulum adipiscing.</p>
      </div>
    </div>
  </div>
</div>