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>