Add new comment

Responsive Youtube Embed in Drupal without installing Modules

Sun, 09/08/2013 - 21:10 -- Sam

I was using Omega and needed to make Youtube embeds be responsive to match my responsive design (without installing any module) and have them resize correctly along with the rest of my content. After some Googling and research, I came up with this solution.

The trick from WebDesignerWall is very simple. You need to wrap the embed code with a <div> container and specify 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.. Here's how to set it up in Drupal 7.

- First you will need to add the following to your CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
text-align: center;
margin-bottom: 5px;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

- Then add the HTML

<div class="video-container">
<iframe width="500" height="400" src="http://www.youtube.com/embed/mgyn90rTZ80" frameborder="0" allowfullscreen></iframe>
</div>

- Result, Responsive YouTube Example

Now, your YouTube video should re-size depending on the browser size or device width.

Voilà !

Tweets

@csscutie on

Azul