YouTube видео макет и проблема автозапуска

У меня есть 4 встроенных видео youtube на простой странице. Одно на разбивочной верхней части, левое одно слегка ударено вертикально, право слегка ударено вертикально слишком и нижнее одно вверх ногами и центризовано. Единственная проблема, которая у меня есть, это то, что его не автоматическое воспроизведение, как только я загружаю страницу.

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Face Detection</title>
<style type="text/css">

body {
    background-color:#000000 
}

#topVid, #leftVid, #rightVid, #bottomVid {



}

#topVid {
    width: 576px;
    height: 324px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

#flexContainer {
    width: 1224px;
    display: flex;
    margin-left: auto;
    margin-right: auto;;
}

#leftVid {

    width: 324px;
    height: 576px;
    background-color: #ACACAC;
    transform:  rotateY(180deg);  
}

#leftVidTransform {

    transform:  rotate(90deg);  
}

#centerBox {

    width: 576px;
    height: 576px;
}

#rightVidTransform {

    transform:  rotate(-90deg);
    margin-top: 250px;  
}

#rightVid {

    width: 324px;
    height: 576px;
    background-color: #333;
    transform:  rotateY(180deg);  
}

#bottomVid {
    width: 576px;
    height: 324px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
     transform: rotateX(180deg);
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
    -moz-transform:rotateX(180deg); /* Firefox */
}

</style>
</head>
<body>
<div class="wrapper">

<div id="topVid"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div>

<div id="flexContainer">
<div id="leftVid"><div id="leftVidTransform"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>
<div id="centerBox"></div>
<div id="rightVid"><div id="rightVidTransform"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>

</div>

<div id="bottomVid"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div>


</div>



</body>
</html>

Я добавилautoplay=1, но безуспешно. Другой вариант, который я попытался, был с помощью скрипта API iframe Youtube и удалением <iframe>из <div>раздела.

Я использовал следующее:

<script src="//www.youtube.com/iframe_api"></script>

    <script>
        /**
         * Put your video IDs in this array
         */
        var videoIDs = [
            'eYR1TqYGNls'
        ];

        var topVid, currentVideoId = 0;
        var leftVid, currentVideoId = 0;
        var rightVid, currentVideoId = 0;
        var bottomVid, currentVideoId = 0;

        function onYouTubeIframeAPIReady() {
            topVid = new YT.Player('topVid', {
                height: '576',
                width: '324',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });

            leftVid = new YT.Player('leftVid', {
                height: '576',
                width: '324',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });

            rightVid = new YT.Player('rightVid', {
                height: '576',
                width: '324',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });

            bottomVid = new YT.Player('bottomVid', {
                height: '576',
                width: '324',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            event.target.loadVideoById(videoIDs[currentVideoId]);
        }

        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.ENDED) {
                currentVideoId++;
                if (currentVideoId < videoIDs.length) {
                    topVid.loadVideoById(videoIDs[currentVideoId]);
                    leftVid.loadVideoById(videoIDs[currentVideoId]);
                    rightVid.loadVideoById(videoIDs[currentVideoId]);
                    bottomVid.loadVideoById(videoIDs[currentVideoId]);
                }
            }
        }
    </script>

Как только я загружаю страницу, все 4 видео запускаются автоматически, но верхняя и нижняя части выровнены по Дальнему левому углу, и каждая сторона видео по-прежнему вертикальная, но видео воспроизводятся в портретном режиме.

Буду признателен за любую помощь. Спасибо

1 ответ

  1. Тип используемого проигрывателя также может влиять на отображение видео. Пожалуйста, попробуйте использовать Flash Player 10.1 или выше, если вы все еще используете другой плеер.

    Как предложено в YouTube JavaScript Player API Reference,

    У конечного пользователя должен быть установлен Flash Player версии 10.1 или выше для правильного просмотра. Из-за этого требования мы предлагаем использовать SWFObject для внедрения SWF и определения версии Flash Player пользователя.

    Кроме того, любая HTML-страница, содержащая проигрыватель YouTube, должна реализовывать функцию JavaScript с именемonYouTubePlayerReady. API вызовет эту функцию, когда проигрыватель полностью загружен и API готов к приему вызовов.

    Встроенные игроки должны иметь видовой экран, который составляет не менее 200px на 200px. Если проигрыватель отображает элементы управления, он должен быть достаточно большим, чтобы полностью отобразить элементы управления без уменьшения видового экрана ниже минимального размера. Мы рекомендуем 16:9 игрокам быть по крайней мере 480 пикселей в ширину и 270 пикселей в высоту.