Responsive Youtube Video

I realized that the Youtube videos that I was embedding in my posts were not Responsive. On smaller screen devices or when you re-size your browser, the blog post layout was getting all messed up. Anyway, below is the solution I borrowed from Jonathan Shu’s blog post to make videos on my posts responsive. Jonathan has explain the concept very well and I encourage you go through his blog post to learn more about this technique.

Step 1: Wrap your video embed code in a div tag


Step 2. Apply the following styles to class video-wrapper

.video-wrapper {

height: 0;

padding-top: 25px;

padding-bottom: 67.5%;

margin-bottom: 10px;

position: relative;

overflow: hidden;

}

Step 3: Adjust the height and width of iframe, embed, object tag inside the div tag to 100% and positioned them absolute

.video-wrapper embed, .video-wrapper iframe, .video-wrapper object {

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

}


Step 4. Let’s test it (Winning is a Habit)