Youtubeその他メディアをポップアップで表示できる「magnific-popup」を使う。（スマホ＆iPadの場合はiframeで表示させる）

media.php

<script src="<?php echo get_template_directory_uri() ?>/library/js/magnific/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/library/js/magnific/magnific-popup.css" />

<?php
$output = '';
$tvcmfield = get_field('audition'); 
if ($tvcmfield != ''):
 while(the_repeater_field('audition')): 
 	if(get_sub_field('audition-url')):
		$youtubeurl = get_sub_field('audition-url');
		$s = '/';
				$cut = mb_strrpos($youtubeurl, $s);
				$str = $youtubeurl;
		$cut = $cut + 1;
		$youtubeID = substr( $str , $cut , strlen($str)-$cut );
		$output .= '<article class="yt-thumb" date-ytid="'. esc_html($youtubeID). '" date-yttitle="'.esc_html(get_sub_field('audition-title')).'" date-ytimg="'.$imgurl.'/library/images/play.png"></article>';
	endif;
endwhile;
echo $output;
endif;
?>

<script>
	var ua = navigator.userAgent;
	if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('iPad') > 0) {
	
		jQuery(function($){
			$('.yt-thumb').each(function(){
				var ytid = jQuery(this).attr('date-ytid');
				var yttitle = jQuery(this).attr('date-yttitle');
				jQuery(this).html('<iframe width="300" height="150" src="http://www.youtube.com/embed/'+ytid+'?rel=0&hd=1&showinfo=0&theme=dark&color=red&autohide=1" frameborder="0" allowfullscreen></iframe><div class="yt-title">'+yttitle+'</div>');
			});
		});
	} else {
		jQuery(function($){
			$('.yt-thumb').each(function(){
				var ytid = jQuery(this).attr('date-ytid');
				var yttitle = jQuery(this).attr('date-yttitle');
				var ytimg = jQuery(this).attr('date-ytimg');
				jQuery(this).html('<a class="video"  href="http://www.youtube.com/watch?v='+ytid+'"><img src="http://i.ytimg.com/vi/'+ytid+'/mqdefault.jpg" alt=""></a><a class="play" href="http://www.youtube.com/watch?v='+ytid+'"><img src="'+ytimg+'"></a><div class="yt-title-pop">'+yttitle+'</div>');
			});

			jQuery('.yt-thumb').magnificPopup({
				delegate: 'a',
	      		type: 'iframe',
	      		disableOn: 480,
	      		iframe: {
	        		markup: '<div class="mfp-iframe-scaler">'+
	        		'<div class="mfp-close"></div>'+
	        		'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
	        		'<div class="mfp-title">Some caption</div>'+
	        		'</div>'
	      		},
	      		gallery: {
	        		enabled:true
	      		},
	      		callbacks: {
	        		markupParse: function(template, values, item) {
	          			values.title = item.el.attr('title');
	        		}
	      		}
	    	});
		});
	}
</script>