Integration into a site

The <iframe> element provided in this JSON will be displayed based on the CSS styles applied to the front-end page where it is embedded. Its rendering and aspect ratio can be influenced by the surrounding CSS. Below are key factors that may affect its appearance:

1. Width and Height Properties :
   The <iframe> is set to take 100% of the width and height of its parent container. This means its dimensions depend on the size of the container and any CSS rules applied to either the container or the iframe itself.

2. Aspect Ratio :
   If the parent container has a specific width-to-height ratio (e.g., 16:9 for videos), the <iframe> will adopt that ratio. Without a defined ratio, the iframe may appear distorted. To maintain a consistent aspect ratio, the container can use CSS rules such as padding-top: 56.25% (for a 16:9 ratio based on width) or layout techniques like CSS Grid or Flexbox for better spacing control.

3. CSS of the <iframe> and Its Container :
   Beyond width and height, other CSS properties—such as position, display, overflow, and padding—can impact the iframe's display. For example, margins or borders on the container might affect the visible size of the iframe.

4. Screen Resolution and Size :
   On different screen sizes, responsive CSS styles may adjust the iframe's dimensions and potentially alter its aspect ratio if no specific ratio is enforced.

Summary:
For optimal rendering, the parent container's CSS should define an aspect ratio or enforce fixed dimensions to ensure consistency across devices and screen sizes.

❗️

Please note that by default the width of the player controls is 300 px. Below this it is possible that not all the controls are displayed.

The width controls is 410px width with the sound slider

Examples

Demo square aspect 300px side :

<div style="position: relative; width: 300px; padding-top: 300px">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
         frameborder="0" scrolling="no"
         src="https://stream.42videobricks.com/blpaWjZZd3RITVJ0Sk83YQ==/player"
         allow="encrypted-media" allowfullscreen>
  </iframe>
</div>

Demo portrait aspect :

<div style="width: 410px">
        <div style="position: relative; width: 100%; padding-top: 177.77%">
          <!-- Ratio 9:16 -->
          <iframe
            src="https://stream.42videobricks.com/blpaWjZZd3RITVJ0SzR1QQ==/player"
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
              overflow: hidden;" <!-- to not display an overflow related to the interface -->
            frameborder="0"
            scrolling="no" <!-- to not display an overflow related to the interface -->
            allow="encrypted-media"
            allowfullscreen>
          </iframe>
        </div>
      </div>