모바일 iframe 자동재생 - mobail iframe jadongjaesaeng

유튜브 영상을 워드프레스나 블로그에 삽입할 때 자동 재생되도록 하고 싶은 경우 이 글에 소개하는 방법으로 YouTube 영상 임베드 코드를 삽입할 수 있습니다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용하면 모바일 기기에서도 자동 재생이 가능합니다.

또한, 아바다 테마 등 일부 테마와 엘리멘터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공합니다.

[ 이 글은 2022년 5월 19일에 마지막으로 업데이트되었습니다. ]

유튜브 영상 자동 재생/반복 재생되도록 삽입하는 방법

HTML 동영상 자동 재생 MP4 파일

MP4 파일을 직접 서버에 업로드하여 자동 재생되도록 하고 싶은 경우에는 다음과 같은 HTML 코드를 사용할 수 있습니다.

<video controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

커뮤니티에 움직이는 GIF 파일이 많이 사용되었지만 움짤 GIF는 오래된 규격이고 비효율적이어서 이제는 점차 MP4 파일로 대체되고 있습니다. 이와 관련하여 "GIF 사용을 멈춰주세요!"를 참고해보세요.

움직이는 GIF 파일을 MP4 파일로 변환시켜주는 사이트도 있습니다. 예: GIF to MP4 converter.

유튜브 영상 자동 재생되도록 삽입하기

동영상 파일을 서버에 직접 업로드하여 삽입할 경우 동영상 용량 때문에 트래픽이 많이 발생할 수 있습니다. 그러므로 동영상 파일은 (웹호스팅) 서버에 직접 업로드하는 방법 대신 유튜브 채널에 업로드하여 공유하는 방법이 많이 사용됩니다.

YouTube 영상을 자동 재생되도록 삽입하려는 경우 임베드 코드 내의 동영상 URL 뒤에 ?autoplay=1를 추가하면 됩니다.

유튜브에서 공유하려는 영상의 '공유' 버튼을 클릭하고 '퍼가기'를 클릭하여 유튜브 영상 임베드 코드를 복사합니다.

유튜브 영상 삽입 코드는 다음과 비슷합니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fNU-XAZjhzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

코드에서 유튜브 영상 URL(예: https://www.youtube.com/embed/fNU-XAZjhzA) 뒤에 ?autoplay=1를 추가합니다. 하지만 크롬에서는 사용자 인터랙션 없이 오디오 콘텐츠를 자동 재생되지 않도록 막고 있다고 합니다. 그래서 &mute=1 파라미터를 추가하면 크롬에서도 자동 재생이 작동합니다.

최종적으로 다음과 비슷한 코드가 됩니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fNU-XAZjhzA?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

자동 반복 재생되도록 하려면 &loop=1을 추가하도록 합니다.

참고로 반응형으로 작동하도록 하고 싶은 경우 "워드프레스: 모바일 기기에서 유튜브 동영상이 잘리지 않고 표시되도록 하기"의 "HTML 코드로 유튜브 동영상 추가하는 방법" 부분을 참고해보시기 바랍니다.

워드프레스에서는 '사용자 정의 HTML' 블록에 위의 코드를 추가합니다. 티스토리 블로그에서는 HTML 모드에서 위의 코드를 원하는 곳에 직접 삽입하면 됩니다.

이 방법으로 유튜브 영상을 삽입하면 워드프레스에서 다음과 같이 영상이 자동 재생됩니다.

하지만 모바일 기기에서는 자동 재생이 되지 않을 것입니다. 이는 모바일 기기에서 데이터를 소진하지 못하도록 제한하고 있기 때문입니다. 모바일에서도 자동 재생되도록 하고 싶은 경우 아래의 방법을 이용할 수 있습니다.

모바일에서도 유튜브 영상 자동 재생되도록 하기

모바일 기기에서도 유튜브 동영상이 자동 재생되도록 하고 싶은 경우 Stackoverflow의 글 "How can I autoplay a video using the new embed code style for Youtube?"(유튜브의 새로운 임베드 코드 스타일을 사용하여 동영상을 자동 재생하는 방법)에서 제시하는 자바스크립트 코드를 사용할 수 있습니다.

<div id="player"></div><script>
                    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();
  }
</script>

상기 코드에서 VideoID 부분을 유튜브 영상의 videoid로 대체하도록 합니다(예: fNU-XAZjhzA). 위의 코드를 그대로 사용할 경우 컨트롤이 표시되지 않습니다. 컨트롤이 표시되도록 하려면 'controls': 0을 'controls': 1로 바꾸면 됩니다.

또한, 'showinfo': 0이 추가되어 있지만, 이 파라미터는 사용이 중단되어 더 이상 작동하지 않으므로 이 라인은 삭제해도 될 것 같습니다.

이 방법으로 영상을 삽입하면 Javascript를 로드해야 하기 때문에 영상이 조금 늦게 로드되지만 모바일 기기에서도 작동합니다. 예시:

자동 재생 동영상 배경 설정하기 - 아바다 테마, 엘리멘터 페이지 빌더 등

아바다 테마 등 페이지 빌더를 사용하는 테마와 엘리멘터 페이지 빌더 등을 사용하는 경우 섹션 등에 YouTube 동영상을 배경으로 지정할 수 있습니다.

Avada 테마를 사용하는 경우 컨테이너 편집의 Background 섹션에서 YouTube/Vimeo 동영상을 배경으로 설정할 수 있습니다.

YouBue/Vimeo Video URL or ID 부분에 동영상 URL(예: https://youtu.be/fNU-XAZjhzA)을 입력하면 됩니다.

마찬가지로 자동 재생되도록 하려면 Mute Video(동영상 음소거) 옵션을 Yes로 설정해야 합니다.

Elementor 페이지 빌더에서도 비슷한 방법으로 동영상을 배경으로 설정할 수 있습니다. 섹션 편집 화면에서 스타일 탭을 선택하고 배경 타입을 동영상을 선택한 다음, 비디오 링크에 유튜브/비메오 링크(예: https://www.youtube.com/watch?v=fNU-XAZjhzA)를 입력하도록 합니다.

시작 시간과 종료 시간을 설정할 수 있고, 모바일에서 재생 옵션을 활성화할 수도 있습니다. 모바일에서 재생 옵션을 "예"로 선택하여 테스트해보니 모바일 기기에서도 자동 재생이 되었습니다.

마치며

이상으로 유튜브 영상을 자동 재생 되도록 블로그에 삽입하는 방법에 대하여 살펴보았습니다. 본문에서 제시하는 방법을 이용하면 구글 크롬, 마이크로소프트 엣지 브라우저, 파이어폭스 등의 브라우저에서 잘 작동할 것입니다.

기분이 우울할 때에는 기운이 다운될 때에는 우울한 음악보다는 모차르트 음악이나 드보르작 교향곡 9번 '신세계로부터' 교향곡과 같이 활기찬 음악을 들으면 좋은 것 같습니다.

참고

• 블로그에 유튜브 동영상 삽입 시 타이틀 링크 비활성화하기
• 블로그에 구글지도를 삽입하는 방법
• 워드프레스 수익형 블로그 만들기