SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    youtube video for mobile

    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
    "Persistence is the path to perfection"

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply
    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.
    "Persistence is the path to perfection"

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I"m not good enough with Javascript to answer that, sorry.

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    }
    "Persistence is the path to perfection"

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You're welcome. For my simple video apps, I've been using iWebkit, not Jquery. http://snippetspace.com/

  7. #7
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah cool I shall check it out thanks again
    "Persistence is the path to perfection"

  8. #8
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    You're welcome. For my simple video apps, I've been using iWebkit, not Jquery. http://snippetspace.com/
    Is it better to use iWebkit?

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    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.
    HTML Code:
    <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.
    HTML Code:
    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
    ictus==""

  11. #11
    Non-Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I understand that aspects of CSS are inconsistent across Android devices. Very frustrating to design for.

    As for video, Sitepoint has this excellent article:
    http://designfestival.com/implementi...back-in-html5/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •