Html 모바일 유튜브 자동재생 - html mobail yutyubeu jadongjaesaeng

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

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

테스트:

참고

• 워드프레스 엘리멘터 페이지 빌더로 만들어진 페이지를 수정하는 방법