Skip to content

This code creates @hackway A modal window that displays a YouTube video when a thumbnail is clicked. The modal window has a close button that closes the window when clicked.

Notifications You must be signed in to change notification settings

Hack-way/YouTube-Thumbnail-pop-up-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

YouTube Thumbnail pop up video

This code creates a modal window that displays a YouTube video when a thumbnail is clicked. The modal window has a close button that closes the window when clicked.

Here is a more detailed explanation of the code:

  1. The thumbnails variable is an array of all the thumbnail elements on the page.
  2. The modalContainer variable is a reference to the modal-container element on the page.
  3. The videoIframe variable is a reference to the video-iframe element on the page.
  4. The closeButton variable is a reference to the close-button element on the page.
  5. The thumbnails.forEach() loop iterates through the thumbnails array and adds an event listener to each thumbnail element.
  6. The event listener for each thumbnail element is a function that gets the video ID from the dataset.id property of the thumbnail element and then sets the src property of the videoIframe element to the YouTube embed URL for the video ID.
  7. The videoIframe element then displays the YouTube video.
  8. The closeButton event listener sets the src property of the videoIframe element to an empty string and then sets the display property of the modalContainer element to none.

Live Domo || YouTube Thumbnail pop up video:

The link https://codepen.io/hackway/pen/eYLbeVW

YouTube channel my Handle is @Hackway I hope this helps! Let me know if you have any other questions.

About

This code creates @hackway A modal window that displays a YouTube video when a thumbnail is clicked. The modal window has a close button that closes the window when clicked.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published