在IFrame中显示YouTube视频的全屏模式的分部

时间:2016-11-03 13:36:23

标签: jquery youtube youtube-iframe-api

我正在使用YouTube iFrame API加载YouTube视频。 我想在fullsrceen模式下在视频上加载自定义控制栏。可以帮我一些。

我的代码是:-For iFrame

 <div class="row" style="position: fixed; display: block " id="youtubeDiv">
          <iframe id="youtube_videos_url" allowfullscreen="1" class="video-js vjs-default-skin"
                  src="http://www.youtube.com/embed/8xXrbKJSp6w?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0" frameborder="0">
          </iframe>
          <div id="video_controls" class="controls" style="display: block">//some code</div>
        </div>

全屏按钮

 <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>

全屏的Jquery是

$('#fs').on('click', function () {
        var $$ = document.querySelector.bind(document);
        var iframe = $$('#youtube_videos_url');
        var req = iframe.requestFullscreen
            || iframe.webkitRequestFullscreen
            || iframe.mozRequestFullScreen
            || iframe.msRequestFullscreen;
        req.call(iframe);
});

先谢谢你。

0 个答案:

没有答案