Custom video player using plyr.io

by Sreeraj Saseendran

HTML

<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
<div
            controls
            crossorigin
            playsinline
            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
            data-plyr-embed-id="https://vimeo.com/442550867"
            src="https://vimeo.com/552206163"
            data-plyr-provider="vimeo"
            id="player2"
           class="plyr__video-embed js-player autoplay" 
            ></div>
            <div
            controls
            crossorigin
            playsinline
            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
            data-plyr-embed-id="https://vimeo.com/442550867"
            src="https://vimeo.com/442550867"
            data-plyr-provider="vimeo"
            id="player1"
           class="plyr__video-embed js-player" 
            ></div>
<div class="plyr__video-embed js-player" id="player">
    <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

<div class="plyr__video-embed js-player" id="playe1r">
    <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

JavaScript

window.objName = [];
const players = Plyr.setup('.js-player',{
                controls: ['play-large', 'progress', 'mute', 'volume', 'fullscreen'],
                volume: 2
            });
            window.objName = players[0];
            debugger;
            players[0].play();