将YouTube视频插入弹出窗口

Question

我在弹出窗口中放置YouTube视频时遇到问题。
问题是插入它。我不能只用<iframe>.它不显示视频:(。我把<iframe>放进一个div，但它不起作用。我将向您展示我的脚本，css样式和html。

我想制作一些类似您单击弹出窗口的东西，在此弹出窗口中显示YouTube视频。

.HTML

                        <div id="popupBox_1">
                            <div class="popupBoxWrapper">
                                <div class="popupBoxContent">
                                    <h3>Popup 1</h3>
                                    <embed width="420" height="315" src="https://www.youtube.com/watch?v=LRblJyq_4Ko">
                                </div>
                            </div>
                        </div>

我也尝试了使用方法，但它:(不起作用。

JavaScript

    function toggle_visibility(id) {
    var e = document.getElementById(id);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
}
window.onclick = function(event) {
    if (event.target == popupBox_1) {
        popupBox_1.style.display = "none";
    }
        if (event.target == popupBox_2) {
     popupBox_2.style.display = "none";
    }
    if (event.target == popupBox_3) {
        popupBox_3.style.display = "none";
    }
    if (event.target == popupBox_4) {
        popupBox_4.style.display = "none";
    }
    if (event.target == popupBox_5) {
        popupBox_5.style.display = "none";
    }
    if (event.target == popupBox_6) {
        popupBox_6.style.display = "none";
    }
    if (event.target == popupBox_7) {
        popupBox_7.style.display = "none";
    }
    if (event.target == popupBox_8) {
        popupBox_8.style.display = "none";
   }
   if (event.target == popupBox_9) {
        popupBox_9.style.display = "none";
    }
}

.CSS

#popupBox_1 { 
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none; border-radius: 10px !important;}

Answer 1

1. 看看吧 ：

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

.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;
}

<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe src="https://www.youtube.com/embed/LRblJyq_4Ko" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

2. 你制作模态的算法不好！

3. 要在代码中包含 youtube 视频，您应该使用 <ifream>