examples/youtube-video.html

<html>
    <head>
        <title>Youtube video events</title>
        <script type="module" src="dist/youtube-video.js"></script>
    </head>
    <body>
        <p>
            Feel free to interact with the video below. Playing, pausing and
            ending it will update the text below:
        </p>
        <p><strong>State:</strong> <span class="video-state"></span></p>

        <youtube-video
            width="640"
            height="360"
            id="my-video"
            src="https://www.youtube.com/watch?v=Wn9twYUXw6w"
        ></youtube-video>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const videoEl = document.querySelector('youtube-video');
                const [stateText] =
                    document.body.getElementsByClassName('video-state');
                // add event listeners
                videoEl.addEventListener(
                    'playing',
                    () => (stateText.textContent = 'playing')
                );
                videoEl.addEventListener(
                    'ended',
                    () => (stateText.textContent = 'finished')
                );
                videoEl.addEventListener(
                    'pause',
                    () => (stateText.textContent = 'paused')
                );
                // load video
                videoEl.load().then(function () {
                    videoEl.play();
                });
            });
        </script>
    </body>
</html>