Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by utafwgyyva
utafwgyyva
901 Points

videos for mobile sites

I embedded YouTube videos to my site but can you help me on how to make them re-size when you re-size the windows (mobile site) please give code thanks.

2 Answers

Matt Harris
Matt Harris
2,762 Points

Hey Yudi

You can make any embed responsive by doing the following. I will use a you tube video as an example.

First the html....

<div class="embed-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JhWGSD_TY2Y" frameborder="0" allowfullscreen></iframe>
</div>

And the CSS...

.embed-wrapper {
  position: relative;
  width: 90%;
  margin: 24px auto;
  padding: 30px 0 56.25% 0;
  height: 0;
  overflow: hidden;
}

.embed-wrapper  iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

Hope this helps.

cheers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Hi Yudi,

If you apply a class to the embedded youtube video's iframe you will be able to modify its shape, size and other style elements in your CSS markup.

For example:

HTML:

<html>
    <body>
        <iframe class="ytframe"  src="http://www.youtube.com/embed/i5qpS_D8Law"></iframe>
    </body>
</html>

CSS:

.ytframe{
    height:600px;
    width: 600px;
}

Should change the size of the youtube window to 600px by 600px.

Then if you change your CSS to include Media Queires you can make the Youtube iframe responsive design for mobile and tablet devices.

For example:

CSS:

@media only screen and (max-width : 400px) {
    .ytframe{
        width: 200px;
        height: 200px;
    }
}

The above code will change the iframe width and height to 200px if the availbile display is less then 400px wide.

You can find out more about media queries and responsive design here on Team Treehouse: http://teamtreehouse.com/library/media-queries

Youtube also have quite a bit of documentation on availible parameters you can apply to a embedded iframe youtube video to change elements and modify the videos functions (for example removing the UI or making the video autoplay): https://developers.google.com/youtube/player_parameters

Hope this helps :)