Implementation

How to embed Mapple Player in your site using HTML or React.

Basic Implementation

Copy and paste this code into your HTML where you want the player to appear:

<iframe
  src="mappletv.uk/watch/movie/1084199"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="encrypted-media"
></iframe>

Responsive Implementation

Wrap the iframe in this container to maintain the correct 16:9 aspect ratio:

<!-- 16:9 Aspect Ratio Container -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="mappletv.uk/watch/movie/1084199"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    allow="encrypted-media"
  ></iframe>
</div>

Responsive with Tailwind CSS

<div className="relative w-full pt-[56.25%]">
  <iframe
    src="mappletv.uk/watch/movie/1084199"
    className="absolute top-0 left-0 w-full h-full"
    frameBorder="0"
    allowFullScreen
    allow="encrypted-media"
  ></iframe>
</div>