Question

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

Answer 1

出于某种原因，当使用可运行的代码段时，这会使Chrome Over Stack Overflow崩溃，所以这里是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>

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

1 个答案: