Воспроизведите видео наложение YouTube в листовке. js

Question

Я пытаюсь построить карту с листовкой и отобразить элемент наложения видео для воспроизведения видео на YouTube.

Создание карты, очевидно, тривиально с листовкой, так что все в порядке.

Моя проблема с наложением видео. Я могу получить область видео элемента для отображения, но она пуста. Я думаю, что мне не хватает какого-то кода инициализации, чтобы запустить видео?

Я протестировал видео YouTube в обычном режиме, и оно воспроизводится нормально.

<script>

    var mapid = L.map('mapid').setView([41.8939551, 12.479556], 14);

    L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://stamen.com">Stamen</a>',
        id: 'mapbox.streets'
    }).addTo(mapid);

    var videoUrls = [
        'https://www.youtube.com/embed/daeB46Z4fjs'
    ];
    var bounds = L.latLngBounds([[41.92398333, 12.45647433], [41.863167640465, 12.602337292]]);

    L.rectangle(bounds).addTo(mapid);

mapid.fitBounds(bounds);
    var videoOverlay = L.videoOverlay(videoUrls, bounds, {
        opacity: 0.8,
        loop: false
    }).addTo(mapid);


</script>

Я создал следующую JS скрипку, чтобы вы могли понять, что я имею в виду -

https://jsfiddle.net/wLz8e50c