Skip to content

Instantly share code, notes, and snippets.

@patric-boehner
Created February 1, 2019 22:06
Show Gist options
  • Save patric-boehner/b530da6705c5461c881c80459db472af to your computer and use it in GitHub Desktop.
Save patric-boehner/b530da6705c5461c881c80459db472af to your computer and use it in GitHub Desktop.
Lazy Load Youtube Video based of URL from CMB2
//* Lightweight Youtube Emebeds
//**********************************************
// https://www.labnol.org/internet/light-youtube-embeds/27941/
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = ytThumb(v[n].dataset.id);
div.onclick = ytIframe;
v[n].appendChild(div);
}
});
function ytThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/maxresdefault.jpg" aria-hidden="true">',
play = '<button class="play" aria-label="Play Video"></button>';
return thumb.replace("ID", id) + play;
}
function ytIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1&amp;rel=0&amp;showinfo=0&amp;color=white&amp;iv_load_policy=3";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
//* Append Youtube URL for iframes
//**********************************************
(function($) {
var $youtube_src = $("iframe[src*='youtube.com']");
var $vimeo_src = $("iframe[src*='player.vimeo.com']");
// Loop for each youtube video
$($youtube_src).each(function( ) {
var $this = $(this);
var _src = $this.attr('src');
var $youtube_options = '&amp;rel=0&amp;showinfo=0&amp;color=white';
// Append
$this.attr( 'src', _src + $youtube_options );
});
// Loop through each vimeo video
$($vimeo_src).each(function( ) {
var $this = $(this);
var _src = $this.attr('src');
var $vimeo_options = '?title=0&byline=0&portrait=0';
//Append
$this.attr( 'src', _src + $vimeo_options );
});
})( jQuery );
<?php
/**
* Video Meta Outputput from CMB2 for lazy loading
*
* Dones't include loading JS
*/
// If this file is called directly, abort.
//**********************
if( !defined( 'ABSPATH' ) ) exit;
//* Video Output
//**********************************************
// CMB2 Meta
$prefix = '_pb_homepage_video_';
$video_url = esc_url( get_post_meta( get_the_ID(), '' .$prefix. 'video', true ) );
$class = 'home-video';
$vidoe_url_host = parse_url( $video_url, PHP_URL_HOST );
$video_url_path = parse_url( $video_url, PHP_URL_PATH ); // for youtu.be based videos
// https://secure.php.net/manual/en/function.parse-url.php
// https://stackoverflow.com/questions/3392993/php-regex-to-get-youtube-video-id
// Get the id of youtube videos coming from youtube.com or youtu.be
if ( $vidoe_url_host == 'www.youtube.com' || $vidoe_url_host == 'youtube.com' ) {
$youtube_url_id = parse_str( parse_url( $video_url, PHP_URL_QUERY ), $video_id );
$youtube_url_id = $video_id['v'];
} elseif ( $vidoe_url_host == 'youtu.be' ) {
$youtube_url_id = trim( $video_url_path, "/" );
}
//**********************
// Output video place holder if video url is provided
if ( !empty( $video_url ) ) {
include CHILD_DIR . '/inc/views/video-placeholder.php';
}
<div class="<?php echo $class; ?>">
<div class="video-wrap">
<?php if( $vidoe_url_host == 'www.youtube.com' || $vidoe_url_host == 'youtube.com' || $vidoe_url_host == 'youtu.be' ) : ?>
<div class="youtube-player embeded-video-player" data-id="<?php echo $youtube_url_id; ?>"></div>
<?php else : ?>
<?php echo wp_oembed_get( $video_url ); ?>
<?php endif; ?>
</div>
</div>
<!-- End Video Embed -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment