Build YouTube Video Gallery demo HTML page

I'm building a travel video blog website (no CMS, pure Java / Java Server Pages) and I need a sample of HTML page (with necessary CSS and JS files) that has YouTube video gallery similar to this page: https://www.danflyingsolo.com/travel-videos/ (see attached screenshots) Your sample will help me to build frontend solution for my website.

For every video from a gallery, thumbnail image representing a video is shown on a page (screenshot 1).
Whenever mouse cursor is over thumbnail, youtube logo play button is shown in the middle of the thumbnail (screenshot 1)
When thumbnail is clicked a popup that has max size is shown with embedded YouTube video that starts playing (screenshot 2)
Whenever user clicks outside of the embedded player, video is stopped (IMPORTANT!) and popup with video is hidden

More detail:

On my website I will have articles that have videos between paragraphs:

<p>Text</p>
<div class="video">videoId1</div>
<p>Text2</p>
<div class="video">videoId2</div>
<p>Text3</p>

Your javascript code should replace all divs with class="video" with HTML that represent video tiles (thumbnails) that could be clicked to play video in a full screen popup.

P.S: it's OK to build your solution on top of existing JavaScript libraries etc.