Avada Forums Community Forum YouTube video size problem (videos are no longer responsive)

Viewing 2 posts - 16 through 17 (of 17 total)
  • Author
    Posts
  • Fusion0489
    Participant
    Post count: 2

    In the Avada settings there is an option called “Iframe Lazy Loading”. Disabled this one and everything seems to work again. Also on a site with Smush and WP Super Cache enabled.

    ContourNL
    Participant
    Post count: 1

    Ok so I solved this issue as follows (on an Avada installation without any of the interfering plugins mentioned in this thread).

    This method works as of 2022-07 for both YouTube embeds with Facade enabled and disabled. The CSS code below overrides explicitly set width parameters of the embedded YouTube player.

    Step 1:
    Add the following to Avada -> Options -> CSS:

    .yt-width-responsive {
        max-width: none !important;
        max-height: none !important;
    }
    
    .yt-width-responsive iframe {
        width: none !important;
        height: none !important;
    }

    (The !important is required here as this CSS is overriding explicitly in class tag CSS codes of sub-elements in the DOM tree generated by javascript in the browser)

    Step 2:
    Next, you can choose to which youtube embeds you want to apply this. To enable responsive widths for a youtube element, go to the Avada Element Options in page designer and set “CSS Class” to “yt-width-responsive” (without a dot).

    YouTube embeds are now responsive.

    High Res thumbnails on facade embeds
    If you enable facade for SEO purposes, you might also notice that the Facade screenshot is blurry if the youtube player is rendered with larger widths than default. That’s because Avada doesn’t give you the option to show the high-res thumbnail/placeholder for the YouTube video. In order to override this behavior, edit ./wp-content/plugins/fusion-builder/assets/js/min/library/lite-yt-embed.js and find the text “hqdefault” and change it to “maxresdefault”. Please note that non-HD videos will not have a maxresdefault thumbnail which will probably result in a 404 on the thumbnail. So only change this if your Facaded YouTube embeds are HD videos. Also note that this script is the minified script which will only be used in the non-wp-admin sessions. (In wp-admin the facading seems disabled in live edit mode or to use different scripts to facilitate the live edit mode)

Viewing 2 posts - 16 through 17 (of 17 total)
  • You must be logged in to reply to this topic.