---

When to use it?

Incorporating embeds, such as YouTube or Vimeo videos, into your website can impact its performance in various ways.

• Firstly, embeds often delay page loading time because they require additional external requests to load content from another server. This can be particularly noticeable on pages with multiple embeds.
• Secondly, multiple embeds come with tracking scripts and cookies for analytics and advertising purposes.

Additionally, because embeds are external resources, your website’s performance becomes partially dependent on the efficiency and availability of the third-party server. If the external server is slow or down, it can negatively affect the user experience on your site.

Lastly, embeds might not be optimized for all devices or network conditions, potentially leading to a suboptimal display or functionality on mobile devices or in areas with poor internet connectivity.

How To use it?

<div class="js--boostify-embed" style="aspect-ratio: 16/9;" data-url-youtube="https://www.youtube.com/embed/1y_kfWUCFDQ">

</div>

document.querySelectorAll('.js--boostify-embed').forEach(element => {
    bstf.videoEmbed({
        url:element.getAttribute('data-url-youtube'), 
        autoplay: true,
        appendTo: element,
        style : { height: "auto"}
    });
})

Configuration options

• url string The URL of the script to load.
• inlineStyle: string The CSS styles to apply inline. If provided, the styles will be applied directly to the page within a <style> tag.
• style object: Optional. An object containing CSS styles to apply to the iframe. By default, the iframe’s width is set to 100% and its height to 100%. The style object allows for additional CSS properties to be defined, such as border, margin, or an explicit height. The function applies these styles to the iframe element.
• attributes: array An array of strings representing additional attributes to set on the script element. Each attribute can be in the form of “key=value” or just “key” for boolean attributes.
• appendTo (string | Element) Optional. Specifies the element to which the script element will be appended. Can be a selector string (‘head’, ‘body’), or a DOM element reference. Defaults to ‘head’.

Real World Examples