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 ) {
+
+ ?>
+
+
+
+
+
+