/** * The following styles get applied both on the front of your site * and in the editor. * * Matches the core/embed block styles exactly to ensure consistent behavior * across all themes. Responsive embed sizing only applies when the theme * declares add_theme_support( 'responsive-embeds' ), which adds the * .wp-embed-responsive class to the element. */ .wp-block-create-block-youtube-enhanced-embed { // Prevent long URLs or content from causing horizontal overflow. overflow-wrap: break-word; // Figcaption spacing (matches core embed block). :where(figcaption) { margin-top: 0.5em; margin-bottom: 1em; } // On narrow viewports, fixed-size iframes (width="500") must not overflow. iframe { max-width: 100%; } // Align left / right — constrain block width and keep the inner wrapper // wide enough to remain usable (mirrors core embed block behaviour). &.alignleft, &.alignright { max-width: 360px; width: 100%; .wp-block-embed__wrapper { min-width: 280px; } } // Basic positioning context for the wrapper. .wp-block-embed__wrapper { position: relative; } } // When inside a cover block, enforce minimum dimensions. .wp-block-cover .wp-block-create-block-youtube-enhanced-embed { min-width: 320px; min-height: 240px; } // Responsive sizing — applied both with and without theme support for better compatibility. // First, apply responsive styling by default. .wp-block-create-block-youtube-enhanced-embed.wp-has-aspect-ratio { .wp-block-embed__wrapper { // Classic padding-bottom intrinsic-ratio technique (default 50%). &::before { content: ""; display: block; padding-top: 50%; } } iframe.yee-video-iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } // Specific aspect ratios — override the padding-top set above. .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { padding-top: 100%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { padding-top: 200%; } // Legacy support: also apply when .wp-embed-responsive is present (theme support). // This maintains compatibility with themes that declare responsive-embeds support. .wp-embed-responsive { .wp-block-create-block-youtube-enhanced-embed.wp-has-aspect-ratio { .wp-block-embed__wrapper { // Classic padding-bottom intrinsic-ratio technique (default 50%). &::before { content: ""; display: block; padding-top: 50%; } } iframe.yee-video-iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } // Specific aspect ratios — override the padding-top set above. .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { padding-top: 100%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; } .wp-block-create-block-youtube-enhanced-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { padding-top: 200%; } }