Geek asks and answers

Phonegap and iPhone with integrated youtube video, broadcast scroll problem

I embed a YouTube video in the iPhone phonegap app

eg

<embed id="yt" src="http://www.youtube.com/v/myvidid" width="300" height="199"></embed>

All of this works great because the iPhone recognizes them as YouTube videos and inserts a poster image, as well as when you click on the YouTube app. However, the problem is that these youtube inserts are within the scrollable content area, for which I use CSS transforms to move up and down using touch scrolling. When the user scrolls the area, the video remains still in a fixed position on top of my content. No matter what CSS I add to the inserts, nothing changes this behavior.

Has anyone encountered this behavior before or found a fix.

Many thanks.

Andrew

+3
source share
2 answers

I have the same problem and I had to use the following workaround:

  • draw images with thumbnails of video in a scroller
  • put the play button above the thumbnail
  • handle click event to display video outside scroller

With this code:

var videos = [];
$('#scroller object').each(function(i,el){
    var movie = $(el).attr("data").replace(/^.*youtube\.com\/v\//,"");
    var width = $(el).attr("width");
    var height = $(el).attr("height");
    var html = '<object style="margin-left:12px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/'+movie+'" type="application/x-shockwave-flash">' + 
    '<param name="allowfullscreen" value="true" />'+
    '<param name="wmode" value="transparent" />'+
    '<param name="src" value="http://www.youtube.com/v/'+movie+'" />'+
    '</object>';
    videos.push(html);
    var thumb = "http://img.youtube.com/vi/"+movie+"/0.jpg";
    $(el).replaceWith('<div id="video-'+i+'" style="width:240px;height:184px;background:url('+thumb+') no-repeat;background-size: 100%;"><div class="play-button"></div></div>');
    $("#video-"+i).click(function(e,el){loadVideo(this)});
});

CSS code for the pay button

.play-button {
    position: absolute;
    width: 240px;
    height: 184px;
    background: url(images/youtube_play.png) no-repeat;
    background-size: 100%;
    background-position: center center;
}

Download video output layout:

function loadVideo(el){
    var id = el.id;
    if (!id) {
        //play button clicked
        id = $(el).parent()[0].id;
    }
    id = id.replace("video-","");
    var html = videos[id];
    //html contains <object> tag
    $('#video-overlay').html(html).show();
}
+5
source

Here is a good tutorial that saved my day

http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/

I also send several codes for quick access.

<html>
    <head>
        <title>YouTube video</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script src="phonegap-1.2.0.js"></script>
    </head>
    <body>

        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>

    </body>
</html>

Then make the following changes to Phonegap.plist

![MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com][2]

The video will also play on your simulator.

+1
source

More articles:


All Articles