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.
Note: In this example, archives refer to any non-singular page.
In this tutorial, I share the code for setting up video/image inserts in Genesis.
We shall
- 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.
Also, we will add Video ID column for Posts table in the WordPress admin to easily see at a glance, which posts have the video ID and which do not.
Step 1
Install and activate ACF.
Created a Video Settings meta box like so (export file of the field group below the screenshot):
Step 2
a) 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:
