The code in this download folder enables you to replace the featured image with a video on archive pages like this :
The code ( as seen in the demo video ) enables you to :
- Use externally hosted ( Youtube & Vimeo ) or self hosted WordPress videos.
- Add your video file to a custom field named video on the single Edit Post screen.
- Use the Genesis > Theme Settings > Content Archives settings to align your video.
- Display the featured image if the video link is not added.
Demo Video
Shows the featured image replaced on archive pages with a video added via a custom field named video on the Single Edit post screen.
Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme with minimal if any modification.
Installation Steps
There’s 3 steps :
- # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
- # Create a custom field named video and add your video URL like you see in the following screenshot.
Set Video Thumbnail Size
You can set the width and height for your video on line 30 – 31 of the code in the functions file.
Self Hosted Videos
Works with externally hosted videos like YouTube & Vimeo as well as self hosted videos you upload to your WordPress Media Library.
You can use this CSS to hide the controls when using self hosted videos.
.archive-video .mejs-controls {
display: none!important;;
}
Was This Tutorial Helpful?