Videos

Youtube – This will not show up on iPad…

Vimeo

One thing that we have played around with was the way videos respond in the theme. By using CSS to control img { max-width: 100% } you are allowing the images to scale all the way down to mobile devices. The problem occurs when you want to add video from vimeo or youtube. They are wrapped with iframe, embed or object along with a height and width attribute.

In order to make the videos more responsive we added a bit of css to our style.css:


iframe, object, embed{
max-width: 100%;
}

We then added the following for our media queries. This helps the videos scale better on mobile devices

iframe, object, embed{
width: 100%;
height: auto;
}

So our media queries would look like this:

/* Media = Mobile - iPhone */

@media handheld, only screen and (max-device-width: 480px) {
iframe, object, embed{
width: 100%;
height: auto;
}
}

/* Media = Mobile - All Others - orientation:portrait */

@media handheld, only screen and (max-device-width: 480px) and (orientation:portrait) {
iframe, object, embed{
width: 100%;
height: auto;
}
}

/* Media = Mobile - All Others - orientation:landscape */

@media handheld, only screen and (max-device-width: 767px) and (orientation:landscape) {
iframe, object, embed{
width: 100%;
height: auto;
}
}

This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Videos

  1. Thanks for sharing guys, a great help!

    If using the VideoPress plugin, it should also be possible to request the video in the lower size by conditionally setting the $content_width variable server side.

    $content_width = ( f3_is_mobile() ) ? 450 : 900;

    Where f3_is_mobile() is a derivative of the PHP mobile browser detection found here.

  2. Great read and super helpful! So in your iframes, do you keep the size characteristics in the iframe, or just remove them and have the CSS size it? Thanks so much for this great article!

  3. Brent says:

    Hi, great work.

    This sounds similar but different from FitVid – have you heard of it. You may wanna check it out. Makes your video fit any screen.

    http://css-tricks.com/video-screencasts/103-integrating-fitvids-js-into-wordpress/

    Cheers !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>