jQueryモバイルYouTubeカスタムコントロールを使用したポップアップ

YouTubeビデオを埋め込んだjQueryモバイルポップアップ（または任意のタイプのjavascriptモーダル）を作成してカスタムコントロールが可能です。jQueryモバイルYouTubeカスタムコントロールを使用したポップアップ

ここには、基本的な「再生」ボタンが付いたJSFiddle demoがあり、私の問題を示すのに役立ちます。

基本的に、私はHTML内のiframeコードを持っている：

<iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen></iframe>

そして、ビデオがロードされたときに、私はこれを行う：動画の読み込み

$(document).on("pagecreate", function() { 
    // bind click events 
    $(document).on('click', '#play', function() { 
    playVideo(); 
    return false; 
    }); 

    $(".ui-popup iframe") 
    .attr("width", 0) 
    .attr("height", "auto"); 
    $("#popupVideo").on({ 
    popupbeforeposition: function() { 
     initYoutubePlayer(); 

     // call our custom function scale() to get the width and height 
     var size = scale(497, 298, 15, 1), 
     w = size.width, 
     h = size.height; 
     $("#popupVideo iframe") 
     .attr("width", w) 
     .attr("height", h); 
    }, 
    popupafterclose: function() { 
     $("#popupVideo").html("<span></span>"); 
     $("#popupVideo iframe") 
     .attr("width", 0) 
     .attr("height", 0); 
    }, 
    }); 
}); 

function initYoutubePlayer() { 
    var tag = document.createElement('script'); 
    tag.src = 'https://www.youtube.com/iframe_api'; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 

    function onYouTubeIframeAPIReady() { 
    alert('onYouTubeIframeAPIReady'); 
    player = new YT.Player('iframe-video', { 
     events: { 
     'onReady': onPlayerReady, 
     } 
    }); 
    }; 

    function onPlayerReady(event) { 
    alert('ready'); 
    }; 

    alert('initialized'); 
} 

function playVideo() { 
    alert('playVideo...'); 
    //player.playVideo(); 
}

が正常に動作しますが、私はできませんがYT.Playerをインスタンス化できるところでYouTube iFrame APIが動作するようにしてください。言い換えれば、 'onYouTubeIframeAPIReady'は起動しません。

私はこのJSFiddleコードのすべての種類の並べ替えを試みましたが、明らかに何かが不足しているように感じます。

カスタムYouTubeコントロールをjQuery Mobile Popupまたはjavascriptモーダルで使用することはできますか？速かった

出典

2016-08-17 kanso

SEE FIDDLE

<!DOCTYPE html> 
 
<title>JQM latest</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
 

 

 
<body> 
 
    <div data-role="page" id="index"> 
 
    <a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a> 
 
    <div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content"> 
 
     <a href="#" id="play" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Play</a> 
 
     <br> 
 
     <div id="player"></div> 
 
     <!-- <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe> --> 
 
    </div> 
 
    </div> 
 
</body> 
 
<script> 
 
    // 2. This code loads the IFrame Player API code asynchronously. 
 
    var tag = document.createElement('script'); 
 

 
    tag.src = "https://www.youtube.com/iframe_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
    // 3. This function creates an <iframe> (and YouTube player) 
 
    // after the API code downloads. 
 
    var player; 
 

 
    function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('player', { 
 
     height: '390', 
 
     width: '640', 
 
     videoId: 'a0gact_tf_0', 
 
     events: { 
 
     'onReady': onPlayerReady 
 
     } 
 
    }); 
 
    } 
 

 
    // 4. The API will call this function when the video player is ready. 
 
    function onPlayerReady(event) {} 
 

 
    function stopVideo() { 
 
    player.stopVideo(); 
 
    } 
 

 
    $(document).on('click', '#play', function() { 
 
    player.playVideo(); 
 
    }); 
 
</script> 
 

 
</html>

出典

2016-08-17 14:54:54 Iceman

うわー、。ありがとうございました！ – kanso

@kanso喜んで助けました。フィドルは完璧に動作します。なんらかの理由でスニペットが正しく実行されませんでした。 – Iceman

jQueryモバイルYouTubeカスタムコントロールを使用したポップアップ

答えて

関連する問題