_post-elements.scss

/* Youtube Gallery Shortcode
--------------------------------------------- */

.youtube-gallery--player {
	max-width: 970px;
	margin: 0 auto 70px;

	h4 {
		margin-top: 14px;
	}
}

.youtube-gallery--listing {

	.title {
		@extend h5;
		display: block;
		margin-bottom: 0;
	}

	.item.active,
	.item:hover {
		text-decoration: none;

		.title {
			color: $highlight;
		}
	}

	@include media(">=tablet") {

		// IE Fallback
		.item {
			float: left;
			margin-left: 32px / 1168px * 100%;
			margin-bottom: 40px;
			width: 368px / 1168px * 100%;

			&:nth-child(3n+1) {
				clear: both;
				margin-left: 0;
			}
		}

		// Modern Browsers
		display: grid;
		grid-column-gap: 32px;
		grid-row-gap: 40px;
		grid-template-columns: repeat( 3, 1fr );

		.item {
			float: none;
			margin: 0;
			width: 100%;
		}

	}

}

global.js

jQuery(function($){

  // Youtube Gallery
	$(document).on('click', '.youtube-gallery--listing a', function(e){
		$('.youtube-gallery--listing .active').removeClass('active');
		$(this).addClass('active');
		$('.youtube-gallery--player iframe').attr('src', 'https://www.youtube.com/embed/' + $(this).data('id') + '?rel=0&showinfo=0' );
		$('.youtube-gallery--player h4').text( $(this).find('.title').text() );
	});
  
});

shortcodes.php

<?php
/**
 * YouTube Gallery
 *
 * @package      CoreFunctionality
 * @author       Bill Erickson
 * @since        1.0.0
 * @license      GPL-2.0+
**/

/**
 * Youtube Gallery
 */
function ea_youtube_gallery_shortcode( $atts = array() ) {

	$atts = shortcode_atts(
		array(
			'user' => false,
		),
		$atts,
		'ea_youtube_gallery'
	);

	if( empty( $atts['user'] ) )
		return;

	$data = ea_get_youtube_videos( $atts['user'] );
	if( empty( $data ) )
		return;

	$data = json_decode( $data );
	if( empty( $data->items ) )
		return;

	$output = '<div class="youtube-gallery">';

	// Video Player
	$output .= '<div class="youtube-gallery--player">';
	$output .= '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr( $data->items[0]->id->videoId ) . '?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
	$output .= '<h4>' . $data->items[0]->snippet->title . '</h4>';
	$output .= '</div>';

	// Video Listing
	$output .= '<div class="youtube-gallery--listing">';
	foreach( $data->items as $i => $item ) {
		$class = 0 == $i ? 'item active' : 'item';
		$output .= '<a href="#main-content" class="' . $class . '" data-id="' . esc_attr( $item->id->videoId ) . '">';
		$output .= '<img src="' . esc_url( $item->snippet->thumbnails->high->url ) . '" />';
		$output .= '<span class="title">' . esc_html( $item->snippet->title ) . '</span>';
		$output .= '</a>';
	}
	$output .= '</div>';

	$output .= '</div>';

	return $output;
}
add_shortcode( 'ea_youtube_gallery', 'ea_youtube_gallery_shortcode' );

/**
 * Get Youtube Videos
 *
 */
function ea_get_youtube_videos( $user = '' ) {

	if( empty( $user ) )
		return;

	$key = 'ea_youtube_gallery_' . sanitize_text_field( $user );

	$data = get_transient( $key );
	if( false === $data ) {

		$channel = ea_get_youtube_channel( $user );

		$url = add_query_arg( array(
			'part'       => 'snippet',
			'channelId'  => $channel,
			'order'      => 'date',
			'maxResults' => 24,
			'key'        => EA_YOUTUBE_API_KEY,
		), 'https://www.googleapis.com/youtube/v3/search' );

		$data = wp_remote_retrieve_body( wp_remote_get( $url ) );
		set_transient( $key, $data, DAY_IN_SECONDS );
	}

	return $data;
}

/**
 * Get Youtube Channel
 *
 */
function ea_get_youtube_channel( $user = '' ) {

	if( empty( $user ) )
		return;

	$channels = get_option( 'ea_youtube_gallery_channels' );
	if( empty( $channels ) || empty( $channels[ $user ] ) ) {

		$url = add_query_arg(
			array(
				'forUsername' => esc_attr( $user ),
				'part'        => 'id',
				'key'         => EA_YOUTUBE_API_KEY,
			),
			'https://www.googleapis.com/youtube/v3/channels'
		);

		$response = wp_remote_get( $url );
		$data = json_decode( wp_remote_retrieve_body( $response ) );
		if( !empty( $data->items ) )
			$channels[ $user ] = $data->items[0]->id;
		else
			$channels[ $user ] = false;

		update_option( 'ea_youtube_gallery_channels', $channels );
	}

	return $channels[ $user ];

}