Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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 :)