javascript - 创建自定义视频显示模式？

Question

我目前正在尝试创建一个模态框，它有一个 slider ，左侧显示其他视频，右侧显示主要视频，基本上是这样的:http://imgur.com/a/vlkkR .还尝试添加滚动效果以实现更多视频，所有内容都将从 youtube 嵌入。但我不完全确定该怎么做，让模态窗口弹出并正常工作，但不确定如何按照我在那里显示的方式显示视频。
HTML:

<div id="myModal" class="modal">

            <!-- Modal content -->
            <div class="modal-content">
              <div class="modal-header text-center">
                <span class="close">&times;</span>
                <h2>Долна Част</h2>
              </div>
              <div class="modal-body">
                <p>Some text in the Modal Body</p>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/yIyqdgQILvQ" frameborder="0" allowfullscreen></iframe>
              </div>
              <div class="modal-footer footer-size">
                <h3>Modal Footer</h3>
              </div>
            </div>
          </div>

CSS:

 /* The Modal (background) */
                    .modal {
                        display: none; /* Hidden by default */
                        position: fixed; /* Stay in place */
                        z-index: 1; /* Sit on top */
                        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 {
                        background-color: #fefefe;
                        margin: 15% auto; 
                        padding: 20px;
                        border: 1px solid #888;
                        width: 80%; 
                    }

                    .close {
                        color: #aaa;
                        float: right;
                        font-size: 28px;
                        font-weight: bold;
                    }

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




                    .modal {
                        display: none; 
                        position: fixed; 
                        z-index: 1; 
                        padding-top: 100px; 
                        left: 0;
                        top: 0;
                        width: 100%; 
                        height: 100%; 
                        overflow: auto; 
                        background-color: rgb(0,0,0); 
                        background-color: rgba(0,0,0,0.4); 
                    }


                    .modal-content {
                        position: relative;
                        background-color: #fefefe;
                        margin: auto;
                        padding: 0;
                        border: 1px solid #888;
                        width: 80%;
                        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
                        -webkit-animation-name: animatetop;
                       -webkit-animation-duration: 0.4s;
                        animation-name: animatetop;
                        animation-duration: 0.4s
                    }


                    @-webkit-keyframes animatetop {
                        from {top:-300px; opacity:0} 
                        to {top:0; opacity:1}
                    }

                    @keyframes animatetop {
                        from {top:-300px; opacity:0}
                        to {top:0; opacity:1}
                    }

                    .close {
                        color: white;
                        float: right;
                        font-size: 28px;
                        font-weight: bold;
                    }

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

                    .modal-header {
                        padding: 2px 16px;
                        background-color: #028fcc;
                        color: white;
                    }

                    .modal-body {padding: 2px 16px;}

                    .modal-footer {
                        padding: 2px 16px;
                        background-color: #028fcc;
                        color: white;
                    }

JS:

    // 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";
        }
    }

Answer 1

这是一个 fiddle使用您需要使用的标记。
复制粘贴的代码太多，所以我不会在答案中包含任何代码。
基本上，您float menu 和content 就是这样。我还为模态页眉和页脚添加了一些调整，我想你也需要它。