---

When to use it?

Including videos on your website can affect its performance due to several reasons. Videos often come with large file sizes, which can significantly slow down page loading times. This slowdown occurs even if the video isn’t immediately necessary for the visitor.

Additionally, auto-playing videos can consume a lot of bandwidth, especially for users on limited data plans, leading to a negative browsing experience.

Moreover, excessive video content can drain battery life on mobile devices more quickly. It’s also worth mention that videos require additional processing power for playback, which can be an issue for older or less powerful devices, potentially leading to stuttering or buffering issues that detract from the user experience.

How To use it?

On your Html first define where you want to place that video

<div class="js--boostify-player" style="aspect-ratio: 16/9;">

</div>

document.querySelectorAll('.js--boostify-player').forEach(element => {
    bstf.videoPlayer({
      url: {
          ogg: 'path.ogg',
          mp4: 'path.mp4',
      },
      attributes: {
          class: "Test",
          id: "MyVideo",
          loop: true,
          muted:true,
          controls:true,
          autoplay:true,
      },
      appendTo: element,
  });
})

<div class="js--boostify-player" style="aspect-ratio: 16/9;" data-url-mp4="yourVideoPath.mp4">

</div>

document.querySelectorAll('.js--boostify-player').forEach(element => {
    bstf.videoPlayer({
      url: {
          mp4: getAttribute('data-url-mp4')
      },
      style:{ height:'200px'},
      attributes: {
          class: "Test",
          id: "MyVideo",
          loop: true,
          muted:true,
          controls:true,
          autoplay:true,
          playsinline:true
      },
      appendTo: element,
  });
})

Configuration options

• url object - Specifies the video URLs. It should contain properties for different video formats to ensure cross-browser compatibility.

  • mp4 string The URL for the Mp4 video format.
  • ogg string The URL for the Ogg video format.

• attributes object - Defines various attributes to control video playback behavior and appearance. Here are some common attributes you can set:

  • class: string CSS class name(s) for styling the video player.
  • id: string A unique identifier for the video element.
  • loop: boolean If set to true, the video will loop continuously.
  • muted: boolean If true, the video will start playing without sound.
  • controls: boolean Shows the video player controls when true.
  • autoplay: boolean If true, the video will start playing as soon as it is ready.
  • playsinline: boolean If true, the video will play inline on mobile devices, instead of going fullscreen.

• appendTo: (string | Element) Specifies the element that the video player will be appended to. This can be either a CSS selector string (e.g., ‘.my-video-container’) or a direct DOM element reference. If not provided, you’ll need to specify where the video player should be added in your document.

• style object: CSS styles to apply to the video player. The object should contain CSS property names as keys and CSS values as values. For example, { width: '100px', height: '200px' }. The width is always set to 100%, and height is set based on the provided value or defaults to ‘auto’ if not specified. Additional styles provided in this object are applied to the video element.

Real World Examples