Skip to content

Video Player & Responsive Iframe/Embed

Using Plyr

To utilize the Plyr script for YouTube iframes, you can follow the steps below:

Add the following HTML code to your page where you want the Plyr video player to be displayed:

<div
  id="player"
  data-poster="img/bg/video.jpg"
  data-plyr-provider="youtube"
  data-plyr-embed-id="yq76q2sMsq8"
></div>

Replace data-plyr-embed-id value with the actual ID of your YouTube video.Also, you can replace data-poster value with the URL of the image you'd like to use as the video poster.

n your script.js file, you can customize the Plyr video player with the following code:

/* ========================================================================== */
/*                           VIDEO PLAYER USING PLYR                          */
/* ========================================================================== */
const player = new Plyr(document.getElementById("player"));

Make sure the id of the html element is the same as the javascript shown,which is player.

For more information about using this plugin, you can visit this page.

Using bootstrap css classes

To embed a YouTube video with a 16:9 aspect ratio, you can use the following example code:

<div class="ratio ratio-16x9">
  <iframe
    class="embed-responsive-item"
    src="https://www.youtube.com/embed/jxEPwNK_K2I?rel=0"
    allowfullscreen
  ></iframe>
</div>

In this code, the <div> element with the classes ratio and ratio-16x9 sets the aspect ratio of the embedded content. The <iframe> element inside it is used to embed the YouTube video. You can replace the src attribute value with your own YouTube video URL.

For more information about using iframes and other elements, you can refer to the Bootstrap documentation on ratios.

Back to top