text 模态 - 使用视频 - 暂停视频关闭
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 模态 - 使用视频 - 暂停视频关闭相关的知识,希望对你有一定的参考价值。
<a href="#" class="btn" id="modalOpen">Open Modal</a>
<div class="modal__containter">
<div class="modal hide">
<a href="#" class="modal__close"><img src="http://image.flaticon.com/icons/png/128/61/61155.png"></a>
<div class="modal__content">
<h3>This is a Modal With a Video</h3>
<iframe id="player1" class="ytplayer" width="560" height="315" src="https://www.youtube.com/embed/Hd-oStxULvc?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
.modal__containter {
position: relative;
&:before {
}
&.modal__open {
overflow: hidden;
&:before {
content: '';
display: inline-block;
background: rgba(0,0,0,0.5);
position: fixed;
top: -100%;
bottom: 0;
left: -100%;
right: 0;
z-index: 0;
height: 200vh;
width: 200vw;
}
}
}
.btn {
text-decoration: none;
color: black;
background: white;
text-transform: lowercase;
font-family: helvetica;
letter-spacing: 0.05em;
font-size: 16px;
padding: 10px 20px;
display: inline-block;
border: 3px solid black;
}
.modal {
display: block;
width: 500px;
margin: 0 auto;
text-align: center;
border: 3px solid black;
position: fixed;
background: white;
top: 60px;
left: 0;
right: 0;
z-index: 1;
-webkit-box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.6);
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease, transform 0.6s ease;
&.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.6s ease;
}
&.transition {
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease, transform 0.6s ease;
}
&.hide {
display: none;
}
h3,
p {
font-family: helvetica;
letter-spacing: 0.05em;
}
h3 {
font-size: 26px;
}
p {
font-size: 14px;
margin-bottom: 10px;
}
iframe {
margin-top: 30px;
width: 100%;
height: 230px;
border: 6px solid black;
}
}
.modal__content {
padding: 50px 40px 30px;
}
.modal__close{
display: inline-block;
position: absolute;
top: 0;
right: 0;
padding: 15px;
&:after {
content: '';
display: inline-block;
height: 100%;
width: 100%;
position: fixed;
top: -100%;
bottom: 0;
left: -100%;
right: 0;
height: 200vh;
width: 200vw;
z-index: -1;
}
img {
height: auto;
width: 20px;
}
}
$(document).ready(function(){
$('#modalOpen').on('click', function(){
$('.modal__containter').addClass('modal__open');
setTimeout(function(){
$('.modal').removeClass('hide');
$('.modal').addClass('transition');
});
setTimeout(function(){
$('.modal').removeClass('transition');
$('.modal').addClass('visible');
},50);
});
var yt_int, yt_players={},
initYT = function() {
$(".ytplayer").each(function() {
yt_players[this.id] = new YT.Player(this.id);
});
};
$.getScript("//www.youtube.com/player_api", function() {
yt_int = setInterval(function(){
if(typeof YT === "object"){
initYT();
clearInterval(yt_int);
}
},500);
});
$('.modal__close').on('click', function(){
yt_players['player1'].pauseVideo();
$('.modal__containter').removeClass('modal__open');
$('.modal').removeClass('visible');
$('.modal').addClass('transition');
setTimeout(function(){
$('.modal').removeClass('transition');
$('.modal').addClass('hide');
},500);
});
});
See Code Pen:
http://codepen.io/DinosVsRobots/pen/mReXea
以上是关于text 模态 - 使用视频 - 暂停视频关闭的主要内容,如果未能解决你的问题,请参考以下文章
text 模态 - 使用视频 - 停止视频和关闭时重置
text 模态 - 使用视频 - 停止视频和关闭时重置
在模态之外单击时暂停 HTML mp4 视频
模态关闭时停止 youtube 视频
关闭模态后视频继续播放
使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?