selecting iframes of youtube videos

[xshewouihc]

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\[code\]<ul> <li> <div class="youtubeMediaContainer"> <img src="http://stackoverflow.com/questions/15828775/video_preview_image1.jpg"> <img src="http://stackoverflow.com/questions/15828775/play_icon.png"> </div> </li> <li> <div class="youtubeMediaContainer"> <img src="http://stackoverflow.com/questions/15828775/video_preview_image2.jpg"> <img src="http://stackoverflow.com/questions/15828775/play_icon.png"> </div> </li><ul>\[/code\]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?