search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.58k stars 2.93k forks source link

Multiple vimeo player script tags are added to <head> when using multiple players #1883

Open capi1O opened 4 years ago

capi1O commented 4 years ago

Expected Behavior

vimeo player script should be appended to head only once

Actual Behavior

<script src="https://player.vimeo.com/api/player.js" async=""></script>
<script src="https://player.vimeo.com/api/player.js" async=""></script>

Steps to Reproduce

Demo codepen : https://codepen.io/monkeydri/pen/vYLJKLm?editors=1010 with 2 vimeo players added according to documentation (https://github.com/sampotts/plyr#multiple-players):

<div class="container">

    <div class="plyr__video-embed" id="ready-player-one">
        <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" id="ready-player-two">
        <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>
const players = Array.from(document.querySelectorAll('.plyr__video-embed')).map(p => new Plyr(p));

Side question: how to tell plyr not to load vimeo player script ? I already use it somewhere else on the page...

Note: I did not tried with youtube player

fuhlig commented 3 years ago

Having the same issue. The behaviour is the same for YouTube & Vimeo player.

From my initial tests, the resources are only loaded once (1 HTTP request, tested in Chrome). But it would be cleaner that the resources are inserted & loaded once.