當div關閉jQuery時停止YouTube視頻

-4

所以我有一個彈出的div顯示何時去YouTube網站的視頻自動播放在那裏，問題是，如果該框關閉的視頻音頻仍然仍然存在，有沒有辦法用jQuery來解決這個問題？我不知道是否有辦法阻止某個元素的聲音？當div關閉jQuery時停止YouTube視頻

的代碼如下。

CSS

.full_page_overlay1 { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background: #626262; 
    opacity: 0.9; 
    z-index: 2147483646; 
} 

.cart_over1 { 
    width: 1024px; 
    position: fixed; 
    float: left; 
    border: 1px solid black; 
    box-shadow: 1px 1px 10px black; 
    background: white; 
    z-index: 2147483647; 
    border-radius: 10px; 
} 

#close_box1 { 
    float: left; 
    top: 0px; 
    left: 0px; 
    display: table-cell; 
    vertical-align: middle; 
    width: 40px; 
    height: 40px; 
    font-size: 40px; 
    text-align: center; 
    color: black; 
    text-shadow: 1px 1px 3px black; 
    font-weight: bolder; 
    cursor: pointer; 
    margin-bottom: 10px; 
}

HTML/PHP

<?php 

    if ($_COOKIE['video'] != 'watched') { 

$value = "watched"; 

// send a simple cookie 
setcookie("video",$value,time() + (10 * 365 * 24 * 60 * 60)); 

?> 

    <div class="full_page_overlay1"></div> 

    <div class="container"> 

    <div class="cart_over1"> 

     <div id="close_box1">X</div> 

     <iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe> 

    </div> 
     </div> 
     <?php } ?>

而jQuery的

$(document).ready(function() { 
    $("#close_box1").click(function(){ 
    $(".full_page_overlay1").fadeOut(); 
    $(".cart_over1").fadeOut(); 
}) 
});

在您的幫助非常感謝。

來源

2013-07-26 AppleTattooGuy

http://stackoverflow.com/questions/2128535/stop -a-youtube-video-with-jquery – falguni

CSS在這個問題上並不真正相關。 – putvande

@PatsyIssa感謝您的建設性和有益的評論 – AppleTattooGuy

替換：

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

要：

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen id="clearmySound"></iframe>

更換JS代碼：

$(document).ready(function() { 
    $("#close_box1").click(function(){ 
    $(".full_page_overlay1").fadeOut(); 
    $(".cart_over1").fadeOut(); 
    $("#clearmySound").attr('src','');  
}) 
});

JSFIDDLE DEMO

來源

2013-07-26 12:46:17

如果你可以通過一些jQuery選擇器訪問iframe，爲什麼要改變標記以達到相同的結果？ – melancia

謝謝你！節省我的一天.. –

@RhezJovovich你的歡迎:) –

當你正在使用的iFrame，你可以清除其src：

$(document).ready(function() { 
    $("#close_box1").on("click", function() { 
     $(".full_page_overlay1").fadeOut(); 
     $(".cart_over1").fadeOut().find("iframe").attr("src", ""); 
    }) 
});

如果您使用的jQuery UI Dialog，你可以設置這是在接近事件來完成。

來源

2013-07-26 12:42:23 melancia

更改您的iframe所以它有一個ID：

<div id="close_box1">X</div> 

    <iframe width="1024" height="600" ID="autoplayvideoframe" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

然後再當窗口關閉移動該元素：

$(document).ready(function() { 
    $("#close_box1").click(function(){ 
    $(".full_page_overlay1").fadeOut(); 
    $(".cart_over1").fadeOut(); 
    $("#autoplayvideoframe").remove(); 
}) 
});

或者你可以只使用預先存在的模態彈出窗口，其處理這種事情對你的一個。將iframe設置爲這樣一個固定的巨大尺寸意味着你會給平板電腦和手機帶來糟糕的體驗。

來源

2013-07-26 12:42:29 rtpHarry

當div關閉jQuery時停止YouTube視頻

回答

相關問題