Question

我有一个显示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上添加各种覆盖吗？最好的方法是什么？

Answer 1

为什么不在条目中创建一个单独的玩家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>

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

选择youtube视频的iframe

1 个答案: