Youtube video for mobile

Mobile
1

Hi guys,

I am a designer who has previously only worked on non-mobile sites and I am just finishing off my first responsive site which has come out ok. I have just one question.

Does html5 video work on all smartphones and what is the procedure for embedding a youtube html5 video onto my site. I only want it to show below a certain screen width because I have some other media which I show in its place on bigger screen devices - tablet and up.

Do I need some JavaScript to stop it from loading unless on a mobile screen width, or will setting it to display:none in the relevant media queries suffice?

Anybody got any code examples?

thanks

2

Android devices are notoriously fickle when it come to HTML5. HTML5 features are not accepted across the board. I avoid the whole problem by simply linking my users to the YouTube page that hosts the video.

For iPhone, I use the YouTube embed code that begins with http://m.youtube.com/

3

Thanks for your reply :slight_smile:
Will I need to use js to conditionally embed the code if it is supported? I am pretty good with jquery so if you could give me a rough description, I’m sure I can figure it out.

4

I"m not good enough with Javascript to answer that, sorry.

5

That’s ok thanks anyway Steven, well from what I’ve worked out if you’re doing everything from a responsive design angle, you could use jquery and do something like:

if($.document.width() < minwidth)
{
//add the video to the DOM
}

6

You’re welcome. For my simple video apps, I’ve been using iWebkit, not Jquery. http://snippetspace.com/

7

Ah cool I shall check it out :wink: thanks again

8

Is it better to use iWebkit?

9

If the site is simple, then iWebkit is great. It has little or no Javascript, so it is fast.

If it is complicated, then Jquery will cover more bases and give you more features. But it can be slow.

10

Hi SilverSurfer5150,

For the most recent responsive site I did I used HTML 5 video and tested it on Android, iPhone (ver 3/4/4s), Palm Pre, and BlackBerry Bold and It worked really well.

The biggest challenge was finding the correct encoding for all the different video streams. I eventually found people on the Internet that had published optimal setting and then combined these into a Video document that I referred to when compressing the video.

This video resizes with the browser so it will automatically adapt to landscape or portrait on smart phones and on Tablets.


<video preload controls>
       <source src="./video/video.mp4" type='video/mp4;' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="./video/video.webm" type='video/webm;' type='video/webm; codecs="vp8,vorbis"'/>
        <source src="./video/video.ogv" type='video/ogg;' type='video/ogg; codecs="theora,vorbis"'/>
        <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="352">
          <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
          <param name="allowFullScreen" value="true" />
          <param name="wmode" value="transparent" />
          <param name="flashvars" value='config={"clip":{"url":"http://www.somedomain.com/video.flv","autoPlay":false,"autoBuffering":true}}'/>
          <!-- Image Fallback. Typically the same as the poster image. -->
        </object>
</video>

And the C.S.S. a nice border and scaled beautifully.


video {
    width: 90%;
    border: 3px solid #362645;
    margin: 20px 0 0 0;
    padding: 1em;
    -moz-box-shadow: 0 0 8px hsla(0,0%,20%,.8);
    -webkit-box-shadow: 0 0 8px hsla(0,0%,0%,.8);
    box-shadow: 0 0 8px hsla(0,0%,0%,.8);
    -moz-border-radius: 3px;
}

Hope this helps.

Steve

11

HTML5 is actually pretty consistent on all mobile platforms from iOS to Android to Windows Phone 7. I think when you get to using flash, it is a lot more tricky even on Android. Embedding presents a lot different issue all in itself. I recommend the linking process which allows the phones to use their native media players to play the content.

12

I understand that aspects of CSS are inconsistent across Android devices. Very frustrating to design for.

As for video, Sitepoint has this excellent article: