Javascript 引导模式&；YouTube播放器技巧

我正在尝试一个小技巧，允许在不使用youtube的API的情况下自动播放/停止嵌入在引导模式中的youtube播放器（因为我将来需要更多视频，所以我希望有一个通用的解决方案）

诀窍是这样的：

显示并播放带有YouTube视频（iframe）的模式[视频具有

autoplay=1

source]

一旦模式被隐藏（

hide event

），iframe的src将在该iframe上的

数据iframe src

属性中捕获，并且iframe的原始

src

设置为

”

，这样视频将停止播放

一旦我加载回视频（

show event）

我试图从

data-iframe-src

属性重新分配iframe的

src

，但它唯一设置的是

？autoplay=1

，我想这可能是因为URL结构（

/youtube…

）

我尝试使用

encodeURIComponent

和

decodeURIComponent

，但仍然没有成功

这是我的密码：

$('#modal-video').on('hide show',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe'),
    iframe_src = '';

if ( e.type == 'hide' ) {
    // Snapshot
    $iframe.attr('data-iframe-src', encodeURIComponent( $iframe.attr('src') ) );

    // Clear iframe
    $iframe.attr('src','');
}
else {
    // Show and re-assign the iframe src
    $iframe.attr('src', decodeURIComponent( $iframe.attr('data-iframe-src') ) );
}
});

---

有什么想法吗？

为什么不使用引导本身的回调呢

$(function() {
  $('#myModal').on('shown.bs.modal', function (e) {
    var src = $('#videowrapper').attr('data-iframe-src');
    $('#videowrapper').attr('src', src);
  });

  $('#myModal').on('hidden.bs.modal', function (e) {
    $('#videowrapper').attr('src', '');
  });
});

这是你想要的

编辑：

数据属性从jQuery加载到src属性中

<iframe id="videowrapper" width="560" height="315" src="" data-iframe-src="https://www.youtube.com/embed/SJTyY2csya8?autoplay=true" frameborder="0" allowfullscreen></iframe>

编辑2：

---

工作示例：

我在模式中有多个视频，如下所示：

<div id="modal">
<div class="video-wrap video-1">
    iframe...
</div>
<div class="video-wrap video-2">
    iframe...
</div>
<div class="video-wrap video-3">
    iframe...
</div>

---

谢谢你的时间和帮助！；-）

你能发布你的代码吗？是的，“.video wrap”只是一个包装iframe的div。我使用的是bootstrap 2.3.2而不是3 AFAIK，如图所示。bs.modal是bootstrap 3，问题不在于回调，但在“Showed”事件上设置的地址仅显示“？autoplay=1”而不是完整的URL。BS版本和事件处理应该无关紧要-请参阅我的编辑以获取iframeTry的示例，该示例在代码开头没有https://的情况下，youtube的嵌入代码以//youtube开头，以支持http/https。我认为这导致了一个问题，当我从数据iframe src设置src时，它只设置“？autoplay=1”而不是完整的URL。嗯，现在它工作了，可能是因为我有多个视频？无论如何，这是可行的：

 // Video Trigger
    $('.play-video').on('click',function(e){
    e.preventDefault();
    var id = $(this).data('video-id'),
        $video = $('.' + id),
        $iframe = $video.find('iframe');
        src = $iframe.attr('src');

    // Hide all
    $('.video-wrap').hide();

    // Show selected video
    $video.show();

    // Show modal
    center_modal('modal-video');

    // Autoplay video
    src = video_autoplay( src );
    if ( typeof( $iframe.attr('data-iframe-src') ) == 'undefined' ) {
        $iframe.attr('data-iframe-src', src);
    }
});



// Show / Hide
    $('#modal-video').on('hide shown',function(e){
    var $iframe = $(this).find('.video-wrap:visible').find('iframe');
    if ( e.type == 'hide' ) {
        $iframe.attr('src','');
    }
    else {
        if ( $iframe.attr('src') == '' ) {
            $iframe.attr('src',$iframe.attr('data-iframe-src'));
        }
    }
});