Toggle YouTube Videos into Larger Playing Div

January 18, 2017

Create your own media page from posts with embedded YouTube videos, and toggle the list of videos into a larger div to play the content using the steps below.

HTML

Create two video feeds, one with all videos (optional to offset by 1), and the larger container on top with the most recent video.

<div class="main_video">
	
	<?php $args = array(
		'post_type' => 'post',
		'posts_per_page' => 1,
		'tax_query' => array(array(
			'taxonomy' => 'category',
			'terms' => 'videos',
			'field' => 'slug'
		))
	);
	
	$main_vid = get_posts($args);
	
	foreach($main_vid as $post) : setup_postdata($post); ?>
	
			<h2 class="main_video_title"><?php the_title(); ?></h2>
			<?php the_content(); ?>
			<hr/>
		
	
	<?php endforeach; wp_reset_postdata(); ?>
	
</div><!-- #main_video -->

<ul id="videos">
	<?php $args = array(
		'post_type' => 'post',
		'posts_per_page' => -1,
		'tax_query' => array(array(
			'taxonomy' => 'category',
			'terms' => 'videos',
			'field' => 'slug'
		))
	); 
	
	$videos = get_posts($args);
	
	foreach($videos as $post) : setup_postdata($post); ?>
	
		<li>
			<div class="video_thumb">
				<h3><?php the_title(); ?></h3>
				<?php the_content(); ?>
			</div>
		</li>
	
	<?php endforeach; wp_reset_postdata(); ?>
</ul><!-- #videos -->

CSS

Style as you see fit.

.main_video {
	width: 100%;
}
.main_video iframe {
	width: 100%;
	height: 470px;
}
.main_video h2 {
    color: black;
    font-weight: bold;
    letter-spacing: 2px;
    font-style: normal;
    font-size: 25px;
    line-height: 1.15em;
    margin: .25em 0;
}


#videos {
	list-style: none;
	margin: 0 -.5%;
	padding: 0;
}
#videos li {
	display: inline-block;
	margin: 0 .5%;
	width: 32%;
	vertical-align: top;
	overflow: hidden;
}
#videos li iframe {
	width: 100%!important;
	max-height: 220px;
}
#videos li h3 {
    color: black;
    font-weight: bold;
    letter-spacing: 2px;
    font-style: normal;
    font-size: 15px;
    line-height: 1.15em;
    margin: .5em 0;
}
#videos li .embed-youtube {
	overflow: hidden;
	height: 185px;
}
#videos li .embed-youtube:hover,
#videos li .embed-youtube:active {cursor: pointer;}
.newsroom-video-thumb {
	margin-top: -2.5em!important;
	max-width: none!important;
	margin-left: -5%!important;
	width: 130%!important;
}

jQuery

Prevent the default “play” action for the list of videos, and grab the video image src ID. Display the video image as source, and activate the video toggle by removing the main video and replacing it clicked item.

jQuery('#videos iframe').each(function(){
		
	var el = jQuery(this);
		
	var src = el.attr('src');
	var videoIDStart = src.indexOf('embed/');
		
	// add embed string length to start at right place
	videoIDStart +=6;
	var videoIDEnd = src.indexOf('?');

		
	var videoID = src.substr(videoIDStart, Number(videoIDEnd - videoIDStart));
	
	var videoImage = 'https://img.youtube.com/vi/'+videoID+'/0.jpg';
		
	var parentElement = el.closest('span.embed-youtube');
		
	parentElement.append('<img src="'+videoImage+'" class="newsroom-video-thumb"/>');
	parentElement.find('iframe').hide();
		
	parentElement.find('img.newsroom-video-thumb').on('click',function(){
		var newVideo = parentElement.find('iframe').clone();
			
		jQuery('.main_video').find('iframe').remove();
		jQuery('.main_video').find('.embed-youtube').append(newVideo);			
		jQuery('.main_video').find('iframe').show();
	});
		
});