0
У меня есть 4 встроенных видео YouTube на простой странице. Один находится на верхней части центра, левая - вертикально, справа - вертикально, а нижняя - вверх ногами и центрирована. Единственная проблема, с которой я сталкиваюсь, заключается в том, что она не работает автоматически, как только я загружаю страницу.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&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&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&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&autoplay=1" frameborder="0" allowfullscreen></iframe></div>
</div>
</body>
</html>
Я добавил autoplay=1, но не успел. Другой вариант, который я пробовал, был с API-интерфейсом iframe от Youtube и удалением из раздела <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 видео запускается автоматически, но верх и низ выравнивать в левом нижнем углу и каждой стороны видео по-прежнему вертикали, но видео воспроизводятся в портретном режиме.
Поблагодарили бы за любую помощь. Спасибо