0

我有一个显示 youtube 视频图像的页面，用户可以从中选择视频。我像这样展示它们

<ul>
    <li>
        <div class="youtubeMediaContainer">
            <img src="video_preview_image1.jpg">
            <img src="play_icon.png">
        </div>
    </li>
    <li>
        <div class="youtubeMediaContainer">
            <img src="video_preview_image2.jpg">
            <img src="play_icon.png">
        </div>
    </li>
<ul>

用户可以通过单击容器（图像，播放图标占用的区域除外）从此处选择这些视频（通过选择我的意思是容器上出现一个大边框，指示其被选中）。但是用户也可以通过点击播放图标来播放这些视频。单击时，youtubeMediaContainer的内容将替换为播放视频的 youtube iframe。

现在的问题是播放视频后，用户现在如何选择该视频。我可以在 iframe 上放置各种叠加层吗？最好的方法是什么？

4

1 回答 1

0

为什么不在条目中创建一个单独的播放器 div 呢？方式：

<ul>
    <li>
        <div class="youtubeListEntry">
            <img src="video_preview_image1.jpg">
            <img src="play_icon.png">
            <div id="youtubeMediaPlaceholder1"></div>
        </div>
    </li>
    <li>
        <div class="youtubeListEntry">
            <img src="video_preview_image2.jpg">
            <img src="play_icon.png">
            <div id="youtubeMediaPlaceholder2"></div>
        </div>
    </li>
<ul>

这样，您仍然可以保留原始结构，以便让用户选择视频。

于 2013-04-05T23:36:59.877 回答