Einfaches Beispiel: YouTube im plyr.io

index.html

<link href="https://cdn.plyr.io/3.6.9/plyr.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />

<script src="https://cdn.polyfill.io/v3/polyfill.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"></script>
<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
<!-- script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script -->
<!-- script src="https://vdo.cy/cdnjs/plyr-hls.js"></script -->
<script src="plyr.js"></script>

<div class="container">
        <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</div>

plyr.js

// Change "{}" to your options:
// https://github.com/sampotts/plyr/#options
const player = new Plyr('#player', {});

// Expose player so it can be used from the console
window.player = player;

style.css

.container {
	margin: 20px auto;
	max-width: 500px;
}