选择 youtube 视频的 iframe

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>

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