0
私は4つの埋め込まれたYouTube動画を簡単なページに持っています。 1つはセンター上部にあり、左側は垂直にフリップされ、右側も垂直にフリップされ、下の1つは上下逆さになり、中央に配置されます。私が抱えている唯一の問題は、ページを読み込むとすぐに自動再生されないということです。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を追加しましたが、成功しませんでした。私が試したもう1つのオプションは、YoutubeのAPI iframeスクリプトを使用して、<div>セクションからを削除することでした。私はすべての4本の動画が自動的に実行が、上部と下部がはるか左の隅と各辺の映像に合わせている、まだ垂直ですが、ページをロードするとすぐに
<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>
：
は、私は次のように使用しましたビデオはポートレートモードで再生されます。助けていただければ幸いです。ありがとう