The 4 different templates in this tutorial enable you to create a mobile responsive grid of YouTube videos like you see in the following image:
Key Features
- Display Youtube video thumbnail or featured image from single page, post or other custom post type.
- Use as page template or any archive type including author, blog, category, search, and tag archive type pages.
- Includes pagination which also works when using as a static page template.
- Both featured image & YouTube thumbnail open in a fancy box.
- Display video grid images in 1, 2, 3, 4, or 6 columns.
- NO plugins required as this solution is 100% hand coded for use in your genesis child theme folder.
- Option to display 1st video image full width and all other videos in columns.
- Optionally add the title for each video and link it back to the full page, post or single custom post type.
- Don’t like Fancy Box, remove the fancybox folder and link the YouTube thumbnail or featured image to the post, page or directly to the YouTube video.
Watch Demo Video
This video demonstration shows you all the key featured as well as the mobile responsibility of the grid on different screen widths:
Tested using the Genesis Sample child theme by StudioPress with YouTube hosted videos. Works best with YouTube in all browsers as Chrome no longer supports Flash. Also tested using mp4 videos hosted in the WordPress Media Library.
Note : The code is only guaranteed to work with YouTube or self hosted ( WordPress ) MP4 video files. It may not work with other video file types because of browser support issues. However, you can always convert different file types to MP4 and other file types may work however not every file type is tested as this solution is coded primarily for YouTube videos. Vimeo will not work, ( Use this template instead ) there maybe others like m3u8 unless converted to MP4.
Here’s the templates for logged in members:
Leave a Reply
You must be logged in to post a comment.