워드프레스 YouTube 영상 자동 재생하도록 삽입하기

워드프레스에 유튜브 영상이 자동 재생되도록 삽입하는 방법

워드프레스에 유튜브 영상이 자동으로 재생되도록 삽입하기를 원하는 경우 임베드 코드의 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

테스트:

참고

1 thought on “워드프레스 YouTube 영상 자동 재생하도록 삽입하기”

  1. 구체적인 코드는 다음 글을 참고해보세요:

    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/

    응답

Leave a Comment

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드