Back to list of all resources

Responsive Videos

Embedded YouTube 16:9 aspect ration videos - this assumes you are embedded a YouTube video that has aspect ratio of 16:9 which is the typical HD video ratio

Make your browser thinner and watch the effect on the video below

Video with NO responsiveness to browser width

Video WITH responsiveness to browser width

Scripts needed

None!!! Purely HTML and CSS solution

Here's the HTML code- specific to YouTube (you can do similar code for other videos from Vimeo, etc.)

Copy and paste the code below in your HTML where you want the video to appear. Change the UNIQUECODE to the unique code for YOUR video.

<div class="videoWrapper">
<iframe src="" frameborder="0" allowfullscreen></iframe>

The ?rel=0 eliminates the grid of related videos after the video is complete.

The &vq=720hd forces the video player to show the video quality of 720HD which is better quality. Other options are:


Here's the CSS - copy and paste into YOUR css file

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
max-width:853px;/*same width as video itself*/
margin:0 auto;/*centers the video*/
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
max-width:853px;/*change as desired*/
max-height:480px;/*if you change max-width, make sure the height has a ratio of 16:9*/
width: 100%;
height: 100%;