워드프레스에 유튜브 영상이 자동 재생되도록 삽입하는 방법
워드프레스에 유튜브 영상이 자동으로 재생되도록 삽입하기를 원하는 경우 임베드 코드의 url 뒤에 ?autoplay=1를 추가하면 됩니다. 아래의 방법은 워드프레스뿐만 아니라 HTML 코드를 추가할 수 있는 모든 CMS와 HTML 사이트에서도 가능합니다.
다음은 구텐베르크 에디터에서 html 임베드 코드로 유튜브 영상을 삽입한 예입니다.
PC 크롬에서는 자동 재생이 잘 작동할 것입니다. 엣지 브라우저에서도 잘 작동합니다. 하지만 모바일 브라우저에서는 자동 재생이 작동하지 않을 것입니다. 이는 모바일 기기 제한 때문입니다. 원치 않는 데이터 소비를 막기 위해 스마트폰에서는 보통 자동 재생이 되지 않도록 제한됩니다.
잘 작동하지 않으면 &mute=1를 추가하면 100% 작동할 것입니다. 워드프레스에서 YouTube 임베드 코드를 추가하는 방법은 다음 글을 참고해보세요.
모바일 기기에서도 자동 재생이 작동하도록 하려면 다음 javascript로 테스트해보시기 바랍니다.
<div id="player"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'VideoID',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'showinfo': 0,
'rel': 0,
'controls': 0,
'color':'white',
'loop': 1,
'mute':1,
// 'origin': 'https://meeranblog24x7.blogspot.com/'
},
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
player.mute();
}var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
// 출처: https://stackoverflow.com/questions/3405242/how-can-i-autoplay-a-video-using-the-new-embed-code-style-for-youtube
Code language: PHP (php)
테스트:
구체적인 코드는 다음 글을 참고해보세요:
https://www.thewordcracker.com/basic/%ec%9c%a0%ed%8a%9c%eb%b8%8c-%ec%98%81%ec%83%81-%ec%9e%90%eb%8f%99-%ec%9e%ac%ec%83%9d%eb%90%98%eb%8f%84%eb%a1%9d-%ec%82%bd%ec%9e%85%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/