Thompson Rivers University
Thompson Rivers University

Video

Adding Youtube and Vimeo Videos Responsively

Please Note: Using these examples will embed videos full screen, in whatever container they are located. After you have copied the embed code from Youtube, check the URL and ensure it includes "https://"

Single Video: Youtube

To avoid showing suggested videos at the end, add ?rel=0 after the 11-character embed code. If you'd like a video to play automatically (or not), add &autoplay=1 (or 0) after the snippet. If you are only adding a single modifier, it should always use a ?. Subsequent modifiers should use an &.

<div class="flex-video">
<iframe src="https://www.youtube.com/embed/vwWR92hH7W4?rel=0" frameborder="0"></iframe>
</div>

Single Widescreen Video: Youtube

<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/J7vSOyEBVEs?rel=0" frameborder="0"></iframe>
</div>

Single Widescreen Video: Vimeo

<div class="flex-video widescreen vimeo">
<iframe src="https://player.vimeo.com/video/141567420" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Embedding a Youtube Playlist using listType and list parameters

<div class="flex-video">
<iframe src="https://www.youtube.com/embed?listType=playlist&list=FLRHajLnmFo4CVXcVa-ihsOA" frameborder="0"></iframe>
</div>

Embedding Youtube Video - Clean

Embedding a Youtube Playlist using the list parameter

<div class="flex-video">
<iframe src="https://www.youtube.com/embed/videoseries?list=PL426831BC08A165DC" frameborder="0"></iframe>
</div>

Using HTML5 Video Tag

<div class="flex-video">
<video src="http://int.nyt.com/data/videotape/finished/2014/11/1416002593/nade3-1050.mp4" loop preload="auto" autoplay="autoplay" poster="http://graphics8.nytimes.com/images/2014/11/17/technology/17celebrity-top1/17celebrity-top1-custom1.jpg"></video>
</div>