selecting iframes of youtube videos - html

Question

I have a page which displays images of youtube videos, and the user can select videos out of them.
I am displaying them like this
<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>
The user can select these videos (by selecting i mean a big border appearing on the container indicating that its selected) from here by clicking on the container (the image, except for the area occupied by the play icon). But the users can also play these videos by clicking on the play icons. When the click, the contents of youtubeMediaContainer is replaced by the youtube iframe where videos play.
Now the issue is that after a video is played, how does the user now select that video. Can i put an overlay of sorts over the iframe? What would be the best way for this?

Answer 1

Why not perhaps create a separate player div inside the entry? In the manner of:
<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>
This way, you still retain your original structure so you can have the user select the video.