Skip to content

Instantly share code, notes, and snippets.

@dhimaskirana

dhimaskirana/protect-youtube.html

Created April 17, 2022 23:51
Show Gist options
  • Save dhimaskirana/0055156cf724f15cc4476a2ad90591fa to your computer and use it in GitHub Desktop.
Save dhimaskirana/0055156cf724f15cc4476a2ad90591fa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
protect-youtube.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protect Youtube</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
<style>
/**
* CSS for public-facing functionality
*/
.plyr {
margin-bottom: 30px;
}
/**
* Disable interaction with underlying YouTube player when paused
* https://github.com/sampotts/plyr/issues/2181
*/
.plyr.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
display: block;
}
</style>
</head>
<body>
<div style="max-width: 100%; width: 900px; margin: 0 auto;">
<!-- https://www.youtube.com/watch?v=5qap5aO4i9A -->
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="5qap5aO4i9A"></div>
</div>
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
<script>
const player = new Plyr('#player');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment