A website I recently worked on had the following requirement:
- The site owner should be able to enter the ID of a YouTube video when editing Posts.
- For posts that have video ID provided, the thumbnail should automatically be pulled from YouTube and shown on the archives with a video icon overlayed. Clicking on the thumbnail should auto play the video in a lightbox.
- For posts that do not have a video ID, the featured image should be displayed on the archives. Featured image should link to the permalink of the post.
- For posts that do not have a featured image, a fallback image linking to permalink should be shown on the archives.
- use Advanced Custom Fields for the Video ID field and Modaal, an accesible & responsive modal jQuery plugin for the lightbox.
- Create a function for the video insert so it can be reused in other areas like template file for Flexible Posts Widget.
Step 1Install and activate ACF. Created a
Video Settingsmeta box like so (export file of the field group below the screenshot): Export file
Step 2a) Upload modaal.min.css to child theme's css directory (create, if not existing). b) Upload modaal.min.js to child theme's js directory. Create a file named modaal-init.js in the same location having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.