Javascript 第二次在页面上播放时,YouTube视频出现在错误的位置
我在刚创建的一个新站点()上遇到了一个奇怪的问题。问题是当你第一次访问它时,你会看到一个大的播放按钮和一张海报图片,这是我在YouTube上展示的视频。单击它,一个div会经过该点,同时还有一个close按钮。到目前为止,一切顺利 但是,如果单击“关闭”按钮,然后再次尝试播放视频,视频会出现并开始播放,但现在它会出现在海报图像和播放按钮下方,约为原始大小的1/5。它现在似乎在其“预期容器”之外播放,尽管在inspector中,代码似乎没有显示这一点。它似乎也没有添加任何额外的内联样式 显然,我希望视频显示在您单击“播放”按钮时第一次出现的位置。那么为什么会发生这种情况呢 我有一支笔,这是密码 HTML JSJavascript 第二次在页面上播放时,YouTube视频出现在错误的位置,javascript,jquery,css,video,youtube,Javascript,Jquery,Css,Video,Youtube,我在刚创建的一个新站点()上遇到了一个奇怪的问题。问题是当你第一次访问它时,你会看到一个大的播放按钮和一张海报图片,这是我在YouTube上展示的视频。单击它,一个div会经过该点,同时还有一个close按钮。到目前为止,一切顺利 但是,如果单击“关闭”按钮,然后再次尝试播放视频,视频会出现并开始播放,但现在它会出现在海报图像和播放按钮下方,约为原始大小的1/5。它现在似乎在其“预期容器”之外播放,尽管在inspector中,代码似乎没有显示这一点。它似乎也没有添加任何额外的内联样式 显然,我希
jQuery(文档).ready(函数(){
var iframeSrc=jQuery('#video iframe').attr(“src”);
jQuery('a.vidjmp')。单击(函数(e){
e、 预防默认值();
jQuery(“#video iframe”).attr(“src”,iframeSrc+”?rel=0&;autoplay=1&;showinfo=0&;autoplay=0”);
jQuery(“#视频掩码”).fadeTo(500,0.9,函数(){
jQuery(“#视频内容”).fadeIn(500,函数(){
jQuery('#video iframe').show();
});
});
});
//关闭模式/屏蔽
jQuery(“#视频关闭,#视频掩码”)。单击(函数(e){
e、 预防默认值();
jQuery('#video iframe').attr(“src”,iframeSrc);
jQuery(“#视频掩码,#视频内容”).fadeOut(0,函数(){
var vidCopy=jQuery('#video iframe').clone();
jQuery('#video iframe').detach();
jQuery(vidCopy).appendTo(“#视频内容”);
});
});
});
找到了问题。这是一个简单的CSS案例:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
@media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}