ciriousjoker · September 1, 2020 01:13
diff --git a/index.html b/index.html
 <html>

 <head>
  <!-- This goes into <head> -->
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
  <script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
 </head>

 <body>

  <!-- This goes into body -->
  <div style="max-width: 256px;">
    <div id="container_video">
      <video id="player" autoplay muted playsinline controls>
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
      </video>
      <img id="frame"
        src="https://upload.wikimedia.org/wikipedia/commons/d/df/Road_sign_frame%2C_black_%26_white%2C_horizontal%2C_empty%2C_silhouette_with_transparent_background.png">
    </div>
  </div>

  <script>
    const player = new Plyr('#player', {
      controls: ["play-large", "play", "progress", "fullscreen"],
      title: 'Example Title',
      loop: {
        active: true
      }
    });

    /**
    * Fixes pausing on click on mobile
    * https://github.com/sampotts/plyr/issues/718
    */
    const videoWrapper = document.querySelector("#container_video .plyr__video-wrapper");
    videoWrapper.addEventListener("click", event => {
      player.togglePlay();
      event.stopPropagation(); // Necessary or the video will toggle twice => no playback
    });
    player.toggleControls(false);
  </script>

  <style>
    /* Any Plyr color adjustments */
    :root {
      --plyr-color-main: #03a9f4;
    }

    #container_video {
      position: relative;

      /* Set the aspect ratio to it scales responsively */
      /* 200% = 1:2 (for vertical smartphones). Use 56.25% for 16:9 */
      padding-bottom: 56.25%;

      /* You can also use a box-shadow, but this
      will work for non-rectangular shapes as well */
      filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));
    }

    /* Fill the whole container */
    #player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* This is NOT an exact science.
    You can waste a LOT of time if you try to use calc() for this */
    #frame {
      position: absolute;
      width: 100%;
      height: 100%;

      transform: scale(1.085, 1.1) translateX(0.35%) translateY(-1.5%);

      /* Make the overlay click-through */
      pointer-events: none;
    }

    /* Video would be invisible otherwise */
    .plyr {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
 </body>

 </html>
	<html>

	<head>
	<!-- This goes into <head> -->
	<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
	<script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
	</head>

	<body>

	<!-- This goes into body -->
	<div style="max-width: 256px;">
	<div id="container_video">
	<video id="player" autoplay muted playsinline controls>
	<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
	</video>
	<img id="frame"
	src="https://upload.wikimedia.org/wikipedia/commons/d/df/Road_sign_frame%2C_black_%26_white%2C_horizontal%2C_empty%2C_silhouette_with_transparent_background.png">
	</div>
	</div>

	<script>
	const player = new Plyr('#player', {
	controls: ["play-large", "play", "progress", "fullscreen"],
	title: 'Example Title',
	loop: {
	active: true
	}
	});

	/**
	* Fixes pausing on click on mobile
	* https://github.com/sampotts/plyr/issues/718
	*/
	const videoWrapper = document.querySelector("#container_video .plyr__video-wrapper");
	videoWrapper.addEventListener("click", event => {
	player.togglePlay();
	event.stopPropagation(); // Necessary or the video will toggle twice => no playback
	});
	player.toggleControls(false);
	</script>

	<style>
	/* Any Plyr color adjustments */
	:root {
	--plyr-color-main: #03a9f4;
	}

	#container_video {
	position: relative;

	/* Set the aspect ratio to it scales responsively */
	/* 200% = 1:2 (for vertical smartphones). Use 56.25% for 16:9 */
	padding-bottom: 56.25%;

	/* You can also use a box-shadow, but this
	will work for non-rectangular shapes as well */
	filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));
	}

	/* Fill the whole container */
	#player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	/* This is NOT an exact science.
	You can waste a LOT of time if you try to use calc() for this */
	#frame {
	position: absolute;
	width: 100%;
	height: 100%;

	transform: scale(1.085, 1.1) translateX(0.35%) translateY(-1.5%);

	/* Make the overlay click-through */
	pointer-events: none;
	}

	/* Video would be invisible otherwise */
	.plyr {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</body>

	</html>