How to embed responsive Re:player in a website

In some cases, you will need to use the responsive feature for Re:player, and here is the guide for you. We have 2 ways to solve this problem:

Method 1:

<iframe
  src="https://replayer.pro/e/video/"
  loading="lazy"
  width="560"
  height="315" 
  style="height: auto; width: 100%; aspect-ratio: 560 / 315;"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  frameborder="0"
  allowfullscreen
></iframe>

In this way the key point is style="height: auto; width: 100%; aspect-ratio: 560 / 315;"

but in case your browser does not support try method 2.

Method 2:

1. Start by adding the iFrame code to your HTML markup. The iFrame code will include a source (src), width, and height attributes. For example:

<iframe
  src="https://replayer.pro/e/video/"
  loading="lazy"
  width="560"
  height="315" 
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  frameborder="0"
  allowfullscreen
></iframe>

2. To make the iFrame responsive, create a wrapper element around the iFrame code. This wrapper will allow us to control the dimensions of the video. For example:

<div class="video-wrapper">
<iframe loading="lazy" width="560" height="315" src="https://replayer.pro/e/video" title="Re:player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

3. Now, add CSS styling to the wrapper and the iFrame. The CSS code will make the wrapper position relative and set its height to 0. It will also create a padding-bottom value that corresponds to the aspect ratio of the video (e.g., 56.25% for a 16:9 video). The iFrame will be positioned absolutely within the wrapper, with a width and height of 100%. For example:

.video-wrapper {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
}

.video-wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

4. Save your HTML and CSS files. Now, the Re:player will be displayed beautifully and responsively on your website, adapting to different screen sizes.

Remember to adjust the padding-bottom value to match the aspect ratio of your specific Re:player.