diff --git a/assets/css/better-core-video-embeds.css b/assets/css/better-core-video-embeds.css index 42b68c2..ada4d9c 100644 --- a/assets/css/better-core-video-embeds.css +++ b/assets/css/better-core-video-embeds.css @@ -5,6 +5,7 @@ .hd-bcve-thumbnail { height: auto; max-width: 100%; + width: 100%; } .hd-bcve-wrapper .play-button { --hd-play-button-size: 80px; diff --git a/assets/css/better-core-video-embeds.min.css b/assets/css/better-core-video-embeds.min.css index ff29fff..e5e1b2c 100644 --- a/assets/css/better-core-video-embeds.min.css +++ b/assets/css/better-core-video-embeds.min.css @@ -1 +1 @@ -.hd-bcve-wrapper{position:relative;cursor:pointer}.hd-bcve-thumbnail{height:auto;max-width:100%}.hd-bcve-wrapper .play-button{--hd-play-button-size:80px;--hd-play-button-background-color:#FFFFFF;display:flex;align-items:center;justify-content:center;position:absolute;top:calc(50% - 0.5 * var(--hd-play-button-size));left:calc(50% - 0.5 * var(--hd-play-button-size));z-index:2;width:var(--hd-play-button-size);height:var(--hd-play-button-size)}.hd-bcve-wrapper .play-button:after{--hd-play-button-opacity:0.8;content:'';display:block;width:0;height:0;border-style:solid;border-width:37.5px 0 37.5px 65.0px;border-color:transparent transparent transparent var(--hd-play-button-background-color);opacity:var(--hd-play-button-opacity);transition:all 0.2s linear}.hd-bcve-wrapper:hover .play-button:after{--hd-play-button-opacity:1} \ No newline at end of file +.hd-bcve-wrapper{position:relative;cursor:pointer}.hd-bcve-thumbnail{height:auto;max-width:100%;width:100%}.hd-bcve-wrapper .play-button{--hd-play-button-size:80px;--hd-play-button-background-color:#FFFFFF;display:flex;align-items:center;justify-content:center;position:absolute;top:calc(50% - 0.5 * var(--hd-play-button-size));left:calc(50% - 0.5 * var(--hd-play-button-size));z-index:2;width:var(--hd-play-button-size);height:var(--hd-play-button-size)}.hd-bcve-wrapper .play-button:after{--hd-play-button-opacity:0.8;content:'';display:block;width:0;height:0;border-style:solid;border-width:37.5px 0 37.5px 65.0px;border-color:transparent transparent transparent var(--hd-play-button-background-color);opacity:var(--hd-play-button-opacity);transition:all 0.2s linear}.hd-bcve-wrapper:hover .play-button:after{--hd-play-button-opacity:1} \ No newline at end of file diff --git a/assets/js/better-core-video-embeds.js b/assets/js/better-core-video-embeds.js index eedd0fd..e63123e 100644 --- a/assets/js/better-core-video-embeds.js +++ b/assets/js/better-core-video-embeds.js @@ -2,32 +2,52 @@ // these are the elements that should contain the thumbnail. document.querySelectorAll( '.hd-bcve-wrapper' ).forEach(( el, i ) => { + // get the youtube video id for the data attribute on the wrapper. + var videoId = el.getAttribute( 'data-id' ); + + // get the associated template element which holds the embed code. + var template = document.querySelector( '#hd-bcve-embed-html-' + videoId ); + + /** + * Add autoplay on the iframe as well as loading from youtube no cookie. + * Grabs the iframe from the embed template. + * Adds the autoplay and other attrs to the iframe src URL + * Replaces the standard youtube domain with the no cookie version. + */ + var iframe = template.content.children[0].querySelector( 'iframe' ); + var iframeSrc = iframe.getAttribute( 'src' ) + '&rel=0&showinfo=0&autoplay=1'; + iframeSrc = iframeSrc.replace( 'www.youtube.com', 'www.youtube-nocookie.com' ); + + // set the new iframe src including autoplay true. + iframe.setAttribute( 'src', iframeSrc ); + + // set an allows attribute on the iframe with an autoplay value. + iframe.setAttribute( 'allow', 'autoplay' ); + + // get the text content of the embed element - this is the caption. + var caption = template.content.textContent.trim(); + + // if we have a caption. + if ( '' !== caption ) { + + // create an element for the embed caption. + var captionEl = document.createElement('figcaption'); + captionEl.classList.add( 'wp-element-caption' ); + captionEl.textContent = caption; + + // add the caption, after the thumbnail. + el.append( captionEl ); + + } + // when the wrapper is clicked. el.addEventListener( 'click', () => { - // get the youtube video id for the data attribute on the wrapper. - var videoId = el.getAttribute( 'data-id' ); - - // get the associated template element which holds the embed code. - var template = document.querySelector( '#hd-bcve-embed-html-' + videoId ); - // clone the template element. var contentOuter = template.content.cloneNode( true ); - - // grab just the first child of the template - this is the figure block element which wraps the iframe. - var content =contentOuter.children[0] - - // find the iframe in the embed content. - var iframe = content.querySelector( 'iframe' ); - - // add auto play true to the iframe src. - // ensures the video plays when the thumbnail is clicked. - var iframeSrc = iframe.getAttribute( 'src' ) + '&autoplay=true&rel=0&showinfo=0'; - var iframeSrcNew = iframeSrc.replace( 'www.youtube.com', 'www.youtube-nocookie.com' ); - - // set the new iframe src including autoplay true. - iframe.setAttribute( 'src', iframeSrcNew ); + // grab just the first child of the template - this is the figure block element which wraps the iframe. + var content = contentOuter.children[0]; // add the iframe embed content before the embed wrapper. el.before( content ); diff --git a/assets/js/better-core-video-embeds.min.js b/assets/js/better-core-video-embeds.min.js index 5006b35..b794d9e 100644 --- a/assets/js/better-core-video-embeds.min.js +++ b/assets/js/better-core-video-embeds.min.js @@ -1 +1 @@ -document.querySelectorAll('.hd-bcve-wrapper').forEach((el,i)=>{el.addEventListener('click',()=>{var videoId=el.getAttribute('data-id');var template=document.querySelector('#hd-bcve-embed-html-'+videoId);var contentOuter=template.content.cloneNode(true);var content=contentOuter.children[0];var iframe=content.querySelector('iframe');var iframeSrc=iframe.getAttribute('src')+'&autoplay=true&rel=0&showinfo=0';var iframeSrcNew=iframeSrc.replace('www.youtube.com','www.youtube-nocookie.com');iframe.setAttribute('src',iframeSrcNew);el.before(content);el.remove();template.remove()})}); \ No newline at end of file +document.querySelectorAll('.hd-bcve-wrapper').forEach((el,i)=>{var videoId=el.getAttribute('data-id');var template=document.querySelector('#hd-bcve-embed-html-'+videoId);var iframe=template.content.children[0].querySelector('iframe');var iframeSrc=iframe.getAttribute('src')+'&rel=0&showinfo=0&autoplay=1';iframeSrc=iframeSrc.replace('www.youtube.com','www.youtube-nocookie.com');iframe.setAttribute('src',iframeSrc);iframe.setAttribute('allow','autoplay');var caption=template.content.textContent.trim();if(''!==caption){var captionEl=document.createElement('figcaption');captionEl.classList.add('wp-element-caption');captionEl.textContent=caption;el.append(captionEl)}el.addEventListener('click',()=>{var contentOuter=template.content.cloneNode(true);var content=contentOuter.children[0];el.before(content);el.remove();template.remove()})}); \ No newline at end of file diff --git a/better-core-video-embeds.php b/better-core-video-embeds.php index 84cb683..773911a 100644 --- a/better-core-video-embeds.php +++ b/better-core-video-embeds.php @@ -4,7 +4,7 @@ Description: A plugin which enhances the core video embeds for Youtube and Vimeo videos by not loading unnecessary scripts until they are needed. Requires at least: 6.0 Requires PHP: 7.0 -Version: 1.0 +Version: 1.1 Author: Highrise Digital Author URI: https://highrise.digital/ License: GPL-2.0-or-later @@ -56,15 +56,20 @@ function hd_bcve_enqueue_scripts() { */ function hd_bcve_register_block_style() { - // register the style for this block. - wp_register_style( - 'better-core-video-embeds-styles', - HD_BCVE_LOCATION_URL . '/assets/css/better-core-video-embeds.min.css' - ); + // only if the page has a core embed block present. + if ( has_block( 'core/embed' ) ) { + + // register the style for this block. + wp_enqueue_style( + 'better-core-video-embeds-styles', + HD_BCVE_LOCATION_URL . '/assets/css/better-core-video-embeds.min.css' + ); + + } } -add_action( 'wp_head', 'hd_bcve_register_block_style' ); +add_action( 'wp_enqueue_scripts', 'hd_bcve_register_block_style' ); /** * Filters the code embed block output for improved performance on Youtube videos. @@ -77,7 +82,7 @@ function hd_bcve_register_block_style() { */ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) { - // if the provider slug name is empty or not youtube. + // if the provider slug name is empty. if ( empty( $block['attrs']['providerNameSlug'] ) ) { return $block_content; } @@ -151,6 +156,23 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) { // break out the switch. break; + + // for vimeo urls. + case 'www.dailymotion.com'; + + // if we have a path. + if ( empty( $parsed_video_url['path'] ) ) { + return $block_content; + } + + // remove the preceeding slash. + $video_id = str_replace( '/video/', '', $parsed_video_url['path'] ); + + // get the vimeo thumbnail url for this video. + $thumbnail_url = hd_bcve_get_dailymotion_video_thumbnail_url( $video_id ); + + // break out the switch. + break; } @@ -164,10 +186,11 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) { return $block_content; } - // create an array of classes to add to the placeholder image figure. - $figure_classes = [ + // create an array of classes to add to the placeholder image wrapper. + $wrapper_classes = [ 'wp-block-image', 'hd-bcve-wrapper', + 'is--' . $block['attrs']['providerNameSlug'], ]; // if we have classNames on the embed block. @@ -177,7 +200,7 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) { $class_names = explode( ' ', $block['attrs']['className'] ); // merge the class names into the figures classes array. - $figure_classes = array_merge( $figure_classes, $class_names ); + $wrapper_classes = array_merge( $wrapper_classes, $class_names ); } @@ -185,28 +208,29 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) { if ( ! empty( $block['attrs']['align'] ) ) { // add the alignment class to the figure classes. - $figure_classes[] = 'align' . $block['attrs']['align']; + $wrapper_classes[] = 'align' . $block['attrs']['align']; } + // allow the classes to be filtered. + $wrapper_classes = apply_filters( '', $wrapper_classes, $block, $video_id, $thumbnail_url ); + // buffer the output as we need to return not echo. ob_start(); - //wp_var_dump( hd_job_allowed_innerblock_html() ); - - ?> - -
- -
- -
- - + // output the registered "block" styles for the thubmnail. + wp_print_styles( 'better-core-video-embeds-styles' ); - thumbnail_url; + + // set the transient, storing the image url. + set_transient( 'hd_bcve_' . $video_id, $image_url, DAY_IN_SECONDS ); + + } + + // return the url. + return apply_filters( 'hd_bcve_vimeo_video_thumbnail_url', $image_url, $video_id ); + +} + /** * Creates a escaping function to allowed certain HTML for embed content. * Needed for when echoing the innerblock HTML. @@ -339,3 +412,96 @@ function hd_job_allowed_innerblock_html() { ]; } + +/** + * Adds the opening figure element to the thumbnail markup. + * + * @param array $block The block array. + * @param string $video_id The ID of the embedded video. + * @param string $thumbnail_url The URL of the video thumbnail. + * @param array $wrapper_classes An array of CSS classes to add to the wrapper. + */ +function hd_bvce_open_markup_figure_element( $block, $video_id, $thumbnail_url, $wrapper_classes ) { + + ?> +
+ +
+ + + +
+ + +