Question

这是我在这里发表的第一篇文章，但我发现这个网站过去非常有帮助，当我进行谷歌搜索时，这是我的首选。

我运行了一个how-to youtube频道。我已经完成了我的网页构建，他们已经准备好上网了，但我需要在每次点击时显示每个视频的说明。我正在使用this responsive player，我一直在尝试修改HTML和DIV，以便每个视频右侧都有一个描述，缩略图也位于其下方。我尝试使用getElementsByIDs而不是getElementByID，但这只是打破了一切（除非我没有做正确的事情），所以我删除了它并尝试使用另一个getElementByID标记。我试验了一个单独的演示视频，以使其正常工作。

这就是我所做的。基本上我所做的就是模仿“vid-container”div的div并将其重命名为“vid-desc-container”，然后将其直接放在html代码中的“vid-container”div下面。然后我创建了除了展示位置之外具有类似属性的新div。结果？它工作，但第二个视频div直接在第一个视频下方。如果我可以获得右侧的位置（视频大小的2/3，也可以在滚动缩略图上方），那么我可以将描述放入其中。如果HTML不清晰，我很抱歉，我试过但不会在没有破坏的情况下粘贴到这篇文章中。

该演示设置为调整到屏幕宽度并缩小到移动平台，但我禁用了该功能，我只是重定向到我不会有描述的网站的移动版本。

我把我编辑过的html文件放在我的保管箱中的演示（演示在上面的链接中）。如果你用[dropbox link] [2]中的html文件替换他们的html文件，那么你将看到我如何修改它。我一直试图将代码粘贴到这个原始帖子中，但它正在切断一些部分。

这是我在

中添加的内容

<DIV class="vid-desc-container"><IFRAME width="560" height="315" id="vid_desc" src="Demo%20Responsive%20YouTube%20Player%20with%20Scrolling%20Thumbnail%20Playlist_files/eg6kNoJmzkY.htm"

FRAMEBORDER = “0” ＆GT;

我还把它添加到了CSS中，我用“左”来玩，并且无法将它放到我想要的位置。

        .vid-desc-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

我还修改了第一个vid-item div，使其有两个“getElementById”而不是一个。

<DIV class="vid-item" onclick="document.getElementById('vid_frame').src='http://youtube.com/embed/eg6kNoJmzkY?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1',

的document.getElementById（ 'vid_desc'）SRC = 'http://youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1'“＆GT;

我很抱歉html没有正确粘贴。此外，我想我需要更多的10个声望点才能发布第二个链接，所以这里是一个href

<a href="https://www.dropbox.com/s/4q3w36y27j8c9b5/Demo%20Responsive%20YouTube%20Player%20with%20Scrolling%20Thumbnail%20Playlist.htm?dl=0">dropbox link</a>

javascript滚动youtube播放器，修改div

0 个答案: