YouTube Embed with Custom Placeholder Image

Download YouTubeCode.zip

This code allows for using an image as a placeholder for a YouTube Video Embed.

It works as follows:

• video_container div contains two elements.
  • an img with class of video_poster (visible on load). This image has a data attribute on it called data-videoid that contains the id of the YouTube video
  • an div with class of videoPlayer (hidden on load)
• When the video_poster is clicked
  • the image is hidden
  • the iframe is made visible
  • JavaScript is executed to replace the videoPlayer div with an YouTube embed iframe using the YouTube API

Images show

• How the ACF fields and are created
• How the ACF fields are configured.
• The PHP code used to generate the proper structure from the ACF fields.
• The JavaScript for implementing the YouTube Embed APIThe actual code is in the zip file.