Youtube視頻覆蓋？

所以我一直在試圖弄清楚如何在點擊播放鏈接時使用YouTube視頻疊加英雄圖像（因此視頻會填充div的高度和寬度）。但我不知道如何做到這一點。我試過使用彈出式插件，但我不認爲它們是解決方案。我試圖完成這些人在他們的網站上有什麼：https://www.squarespace.com/ 但是因爲我是一個noob，我無法閱讀他們做了什麼。Youtube視頻覆蓋？

我該怎麼辦？用div覆蓋youtube視頻，或？我也需要jQuery嗎？有人幫忙！

謝謝！編輯：我試過使用Magnific Popup。但我無法使它工作。無論如何，這是我已經嘗試過：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 

<a class="video" href="https://www.youtube.com/watch?v=LGZaWik2430">Click To View</a> 

$('.video').magnificPopup({ 
    type: 'iframe', 


    iframe: { 
    markup: '<div class="mfp-iframe-scaler">'+ 
       '<div class="mfp-close"></div>'+ 
       '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' + 
       '</div>' 
    }, 
    callbacks: { 
    markupParse: function(template, values, item) { 
    values.title = item.el.attr('title'); 
    } 
    } 


});

來源

2017-04-23 Retros

你試過了什麼代碼？編輯你的問題並粘貼在那裏。這不是一個免費的寫作網站，你必須至少嘗試 – mlegg

會做什麼，給我一秒。雖然，他們都沒有工作。大聲笑 – Retros

你可以使用W3 Schools插入視頻到模態。您可以使用圖像而不是模式按鈕。以下是我的了：

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    color: #aaaaaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<h2>Modal Example</h2> 
 

 
<!-- Trigger/Open The Modal --> 
 
<button id="myBtn"><img src="IMAGE URL" height="50px" width="50px" alt="YOUR IMAGE"></button> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>Your Video Here</p> 
 
    </div> 
 

 
</div>

來源

2017-04-23 14:42:54 Sank6

@Retros Upvote並將我的答案標記爲答案，如果你認爲它適合。：D – Sank6

視頻的第一位置，尺寸，甚至懸停動畫和背景圖像，覆蓋按鈕等等都可以使用CSS來完成。我沒有看到需要爲此使用JavaScript。

至於視頻播放，也可以適合使用CSS背景圖像的大小，您可以根據需要設置播放選項。

來源

2017-04-23 14:44:44 Riyaz

這是真的。你不需要JavaScript，但我的答案使用JS來打開彈出窗口 – Sank6

Youtube視頻覆蓋？

回答

相關問題