0
ekko-lightboxプラグインの属性を持つBootstrapモーダル内でYouTube動画を正常に再生する方法を解明しようとしています。私はVimeoのリンクを利用することができましたが、YouTubeのリンクは動画を取得せず、ボタンの画像（外部リンク）も表示されません。私の仕事ファイルは私のデスクトップ/ローカルに保存されています。 YouTubeと画像のリンクが機能するためには、ファイルをISPにアップロードする必要がありますか？また、インターネットに頼ることなく、モーダルでビデオを再生する方法を知りたいと思います。そうすれば、ウェブサイトのコンセプトを提示してインターネットにアクセスできない場合でも、私はまだ機能を持つことができます。Ekko-LightboxでYouTube動画/リンクされた画像が再生されないという問題
ここに私のインデックスファイルに表示されるコードです。 Vimeoビデオリンクと静的な滝画像リンクのみが動作します。ボタン画像のリンクも表示されません。助けてください！！！
<!DOCTYPE html>
<html>
<head>
<title>Mixed Lightbox Gallery in Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ekko-lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3 class="page-header" id="mixed-gallery">Mixed gallery</h3>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="row">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
</a>
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
</a>
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ekko-lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
</body>
</html>