我有一个div,“c1”,它是显示:除了当div“p1”悬停时之外。在“c1”中,有一个设置为自动播放的 YouTube 视频。在 Chrome 中,当 div 可见时,视频会开始播放,但当它消失时,视频会继续播放。有没有办法只用 HTML 和 CSS 来阻止它,还是我需要 JS?
HTML:
<div class="p1 parent"></div>
<div class="c1 child"><iframe class="embededInChild" src="https://www.youtube.com/embed/VLrULbtD-oo?autoplay=1" frameborder="1"></iframe>
<p class="childDescription">enjoy beautiful downtown bethesda just X miles from campus!</p></div>
CSS:
.child {
display: none;
width:494px;
height:300px;
position:absolute;
background-color: #E3EBF1;
border-radius: 10px;
border: 1px solid #333333;
left:0px;
top:-320px;
}
.parent{
background-color: #7BB9E0;
width:110px;
height:110px;
border:2px solid black;
display: block;
border-radius:55px;
margin: 5px;
display: inline-block;
float:left;
}
.parent:hover{
background-color: #CCCCCC;
border-color: #93305D;
}
.embededInChild{
width:474px;
height:250px;
margin: 5px 10px 0px 10px;
}
p.childDescription{
line-height:12px;
margin:5px 5px 0px 5px;
padding:0px;
color: #333333;
text-align: center;
}
.p1:hover + .c1 {
display: block;
}
我采用了前面在评论中共享的脚本,并且创建了一个替代版本,可以在元素上的 mouseenter 上播放视频,并在移出元素时停止。
http://jsfiddle.net/588vwkrw/6/
供您参考的代码(但请使用 JSfiddle,因为外部 youtube 脚本链接在 SO 片段小部件中不起作用)
var players = []; // an array where we stock each videos youtube instances class
$(function() {
var playvideo = function() {
var id = $(this).attr("href");
$(id).show();
var pid = id.replace("#", "")
players[pid].playVideo();
}
var stopvideo = function() {
var id = $(this).attr("href");
$(id).hide();
var pid = id.replace("#", "")
players[pid].stopVideo();
}
$(".playvid").mouseenter(playvideo).mouseleave(stopvideo);
});
function onYouTubeIframeAPIReady() {
var videos = $('iframe'), // the iframes elements
playingID = null; // stock the current playing video
for (var i = 0; i < videos.length; i++) // for each iframes
{
var currentIframeID = videos[i].id; // we get the iframe ID
//alert(currentIframeID);
players[currentIframeID] = new YT.Player(currentIframeID); // we stock in the array the instance
}
}
onYouTubeIframeAPIReady();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async="false" type="text/javascript" src="https://www.youtube.com/player_api"></script>
<div>
Hover on the anchor links to play related videos</div>
<a class="playvid" href="#player"> Play video 1 </a>
<br/>
<br/>
<br/>
<a class="playvid" href="#player2"> Play Jquery video</a>
<br/>
<br/>
<br/>
<iframe style="display:none" id="player" width="385" height="230" src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
<iframe style="display:none" id="player2" width="385" height="230" src="https://www.youtube.com/embed/hMxGhHNOkCU?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
我所做的只是将 iframe 中的 src 属性替换为空:
$('.youtube_div .close').on('click', function() {
$('.youtube_div iframe').attr('src', '');
})
似乎有效。
删除 IFrame src 不是一个选项,因为如果我们再次打开该 div/popup,那么删除的 src 会导致 Iframe 损坏,而应使用该策略。 1:获取IFrame的父容器。 2:创建一个带有src和其他属性的IFrame元素并将其附加到父容器。 如果您使用弹出窗口在 iframe 内显示 Youtube 视频,也请按照以下步骤操作 3:附加 onclick 事件监听器并在弹出窗口关闭时删除该 iFrame。
现在每次弹出窗口打开时都会创建新的 IFrame,当弹出窗口关闭时,IFrame 会被销毁。
window.createVideoContainer = function createVideoContainer() {
const parentElement = document.getElementById('building-detail-iframe-container');
const iframe = document.createElement('iframe');
iframe.id = 'embed-video-iframe';
iframe.src = video_link;
iframe.width = '100%';
iframe.height = '100%';
parentElement.appendChild(iframe);
const closePopupTrigger = document.getElementsByClassName('video-close-popup')[0];
if(closePopupTrigger){
closePopupTrigger.addEventListener('click', () => {
console.log('trigger', iframe)
iframe && iframe.remove();
})
}
}