html - 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 の上にある種のオーバーレイを置くことはできますか? これには何が最善の方法でしょうか？