Make YouTube embeds responsive and honor size attrs

Extract width/height attributes for YouTube blocks and wrap iframe in a responsive container with max-width styling. Update Gutenberg renderer to emit responsive classes and inline size attributes. Regenerate built CSS/JS and update related block components (document FileViewer, YouTube edit/save/style) and front-end assets. Also include a minor provider update (Flourish) and vendor changes. Built/static assets updated accordingly.

Author: akashmdiu

EmbedPress/Gutenberg/EmbedPressBlockRenderer.php

@@ -1220,15 +1220,20 @@ public static function render_youtube_block($attributes, $content = '', $block =
         // Build alignment class
         $align_class = 'align' . $align;
 
+        // Extract width/height from attributes
+        $width = isset($attributes['width']) ? intval($attributes['width']) : 640;
+        $height = isset($attributes['height']) ? intval($attributes['height']) : 360;
+
         // Generate YouTube block HTML
         ob_start();
     ?>
-        <div class="ose-youtube wp-block-embed-youtube ose-youtube-single-video <?php echo esc_attr($align_class); ?>">
+        <div class="ose-youtube responsive wp-block-embed-youtube ose-youtube-single-video <?php echo esc_attr($align_class); ?>" style="max-width: 100%;">
             <iframe src="<?php echo esc_url($processed_iframe_url); ?>"
                 allowtransparency="true"
                 allowfullscreen="true"
                 frameborder="0"
-                width="640" height="360">
+                style="max-width: 100%;"
+                width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($height); ?>">
             </iframe>
         </div>
     <?php

assets/css/blocks.build.css

@@ -174,6 +174,10 @@
     height: 100%;
 }
 
+.ose-flourish iframe {
+    border: none;
+}
+
 .ose-deviantart img, .ose-deviantart a, .ose-deviantart div {
     width: 100%;
     height: 100%;
@@ -1604,6 +1608,7 @@ a.ep-social-icon.twitter:focus-visible {
     right: 2px;
     bottom: 8px;
     opacity: 0;
+    pointer-events: none;
 }
 
 .cui-toolbar-button-right {
@@ -1671,6 +1676,18 @@ a.ep-social-icon.twitter:focus-visible {
     height: 100% !important;
 }
 
+.ep-file-download-option-masked.fullscreen-enabled {
+    overflow: visible;
+}
+
+.ep-file-download-option-masked.fullscreen-enabled .embed-download-disabled {
+    display: none;
+}
+
+.ep-file-download-option-masked.fullscreen-enabled::after {
+    display: none;
+}
+
 .embedpress-document-embed {
     position: relative;
 }
@@ -1718,6 +1735,7 @@ a.ep-social-icon.twitter:focus-visible {
     bottom: 0;
     content: '';
     left: 0;
+    pointer-events: none;
 }
 
 .ep-file-download-option-masked.ep-file-docx::after {

assets/css/embedpress.css

@@ -1184,6 +1184,24 @@ jQuery(window).on("elementor/frontend/init", function () {
     elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_document.default", filterableGalleryHandler);
     elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", adsHandler);
     elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", epGlobals.handlePosterImageLoad);
+
+    // Re-initialize custom player when Elementor widget becomes ready
+    var customPlayerHandler = function ($scope, $) {
+        if (typeof initPlayer === 'function') {
+            var wrappers = $scope[0].querySelectorAll('.ep-embed-content-wraper');
+            wrappers.forEach(function (wrapper) {
+                if (!wrapper.classList.contains('plyr-initialized')) {
+                    initPlayer(wrapper);
+                }
+            });
+        }
+
+        // Re-initialize lazy loaded iframes for this widget
+        if (typeof window.epReinitLazyLoad === 'function') {
+            window.epReinitLazyLoad();
+        }
+    };
+    elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", customPlayerHandler);
 });
 
 

assets/js/blocks.build.js

@@ -16,6 +16,7 @@ const FileViewer = ({
             title={title}
             src={sanitizeUrl(url)}
             style={{ height: height + 'px', width: width + unitoption }}
+            allowFullScreen
             onLoad={() => setFetching(false)}
             onMouseUp={() => setShowOverlay(false)}
         />

assets/js/front.js

@@ -71,6 +71,7 @@
   right: 2px;
   bottom: 8px;
   opacity: 0;
+  pointer-events: none;
 }
 
 .cui-toolbar-button-right {

src/Blocks/document/src/components/FileViewer.js

@@ -68,6 +68,7 @@
   right: 2px;
   bottom: 8px;
   opacity: 0;
+  pointer-events: none;
 }
 
 .cui-toolbar-button-right {

src/Blocks/document/src/editor.css

@@ -124,7 +124,7 @@ export default function YouTubeEdit({ attributes, setAttributes, isSelected }) {
 		return (
 			<div {...blockProps}>
 				<Inspector attributes={attributes} setAttributes={setAttributes} />
-				<div className={`embedpress-youtube-embed ${width_class}`} style={{ width: `${width}px`, height: `${height}px` }}>
+				<div className={`embedpress-youtube-embed ${width_class}`} style={{ maxWidth: '100%', width: `${width}px`, height: `${height}px` }}>
 					{fetching ? <EmbedLoading /> : null}
 
 					<Iframe

src/Blocks/document/src/editor.scss

@@ -31,7 +31,7 @@ const save = ({ attributes }) => {
 			<div id={`ep-gutenberg-content-${_md5ClientId}`} className="ep-gutenberg-content">
 				<div
 					className={`embedpress-youtube-embed ${width_class}`}
-					style={{ width: `${width}px`, height: `${height}px` }}
+					style={{ maxWidth: '100%', width: `${width}px`, height: `${height}px` }}
 					data-embed-type="YouTube"
 				>
 					{shouldLazyLoad ? (