Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtubeその他メディアをポップアップで表示できる「magnific-popup」を使う。(スマホ&iPadの場合はiframeで表示させる)
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment