html - 在同一页面上将菜单项中的视频打开到 iframe 中

Question

我有一个菜单，其中包含多个指向通过公司内部视频播放器播放的视频的链接。这些视频存储在亚马逊云服务中。当前，视频 href 位于 ul 内的 li 内的标签内。菜单在左侧，如何在右侧的 iframe 中打开同一页面上的视频？

Answer 1

由于某些原因，当使用可运行的代码片段时，这会导致 Stack Overflow 中的 Chrome 崩溃，所以这里是 jsFiddle .假设您已经有了布局，您只需创建一个具有正确属性的 iframe，然后将其放入页面右侧的容器中。在“点击”事件上执行此操作。

var button = document.getElementById("open-video");
button.addEventListener("click", function () {
    var iframe = document.createElement("iframe"),
        container = document.getElementById("frame-container");

    iframe.width = 420;
    iframe.height = 345;
    iframe.frameborder = 0;
    iframe.src = "http://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";

    container.innerHTML = '';
    container.appendChild(iframe);
});

<button id="open-video">Click to play video</button>
<div id="frame-container"></div>