Support » Plugin: a3 Lazy Load » youtube videos are not responsive

  • Gruskel

    (@elevas33)


    Hi I love this plugin but I just realized that youtube videos are not responsive. On PC it doesn’t look so ugly but on mobile it looks horrible… is there any way by code or an update to force the responsive mode ? thanks. https://ibb.co/CPJDJY4

    • This topic was modified 1 year ago by Gruskel.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Gruskel

    (@elevas33)

    In my other websites I use the classic editor and in its day a programmer gave me this code to put in functions

    add_filter( ’embed_oembed_html’, ‘wpse_embed_oembed_html’, 99, 4 );
    function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {

    return ‘<div class=”videoresp”>’ . $cache . ‘</div>’;
    }

    And this one to put it in the custom style of the CSS template

    /* Codigo para hacer responsive los videos de youtube */

    .videoresp{position:relative;max-width:900px;margin:1.5rem auto 1.5rem}.videoresp:before{padding-top:56.25%;display:block;content:””}.videoresp iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important}

    But with Gutenberg does not work .. I have to change? Thanks!.

    Plugin Author Steve Truman

    (@a3rev)

    Hello @elevas33

    You do not need any of that.

    With the Gutenberg editor just use the core WordPress YouTube block – copy and paste the video URL into the block.

    Responsive YouTube video that is lazy loaded.

    Side Note! With classic editor just copy and paste the URL into the editor – it’s only not responsive if you use the embed code which contains width and height attributes – those make it fixed size in all browsers.

    Hope that helps.

    Steve

    Thread Starter Gruskel

    (@elevas33)

    Precisely because of that I wrote you in Gutenberg it doesn’t work… since a programmer made me a code to function in classic but in Gutenberg it doesn’t… Yesterday I paid a programmer to fix it in the classic editor and in Gutenberg for that we have to put in CSS of our theme the following:

    .videoresp{text-align: center;display: block;margin:0 auto 1rem;max-width:100%}
    .videoresp iframe{max-width:100%;max-height:460px}
    @media (max-width:700px){.videoresp iframe{max-width:100%;max-height:230px}}

    And in functions.php the following:

    add_filter( ’embed_oembed_html’, ‘wpse_embed_oembed_html’, 99, 4 );
    function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {

    return ‘<div class=”videoresp”>’ . $cache . ‘</div>’;
    }

    This is solved with your plugin and any video that uses Lazy Load. It would be great if you could incorporate it at plugin level in updates since there is no lazy load plugin that fixes this bug and I see many sites with broken videos because of using this effect in their videos… Greetings!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘youtube videos are not responsive’ is closed to new replies.