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
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à !
Add new comment