Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用
bootstrap

bootstrap

bootstrap modal实现视频的正常播放和关闭

WordPressellen 发表了文章 • 1 个评论 • 3861 次浏览 • 2018-05-10 11:01 • 来自相关话题

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>
<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>


autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
} 查看全部
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>
<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>


autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
}

bootstrap modal实现视频的正常播放和关闭

WordPressellen 发表了文章 • 1 个评论 • 3861 次浏览 • 2018-05-10 11:01 • 来自相关话题

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>
<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>


autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
} 查看全部
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>
<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>


autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
}