将 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>

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

2. 要将 youtube 视频包含到您的代码中，您应该使用 <ifream>