Full Width YouTube Videos

Written by: John | 17th Feb 2017

Get a full size youTube video background

Apply the styles below to use a full width 16:9 ratio video in your web page.

#videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
#videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
<div id="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/VID_ID?rel=0&controls=0&showinfo=0&rel=0&autoplay=1&loop=1&hd=1" frameborder="0" allowfullscreen></iframe>
    
</div>

Related Posts

21/10/2019 Code

Swipe close for mobile menu

Using Vanilla JS (ish) to add swipe features to mobile views.
Written by: John
20/10/2016 Code

CSS Transitions

Easy copy and paste transition css, to enable transitions to all properties.
Written by: John
24/06/2015 Code

Command Line SSH stuff

Some tips and tricks for using the command line to do useful stuff, mainly just a reference for myself.
Written by: John
22/06/2015 Code

Handy, dandy WordPress excerpt length function

If you have been using WordPress on multiple projects you must have come up against needing to pull a custom excerpt size? Now there are many ways to do this, eg, you could use this to pull say 80 characters…
Written by: John
03/02/2015 Code

Add a masonry blog to WordPress

Masonry post display So you have seen the fancy shmancy "Masonry blog" blog pages used on many modern WordPress sites and thought, that would look great on my site... Well here's how to add a masonry blog to WordPress without…
Written by: John