이 기사 개요

첫 투고가 됩니다!
이 기사는 포트폴리오에 youtube 동영상을 통합했을 때 발생한 문제에 대한 기사입니다.

문제점

포트폴리오에 youtube 동영상을 대량으로 통합했을 때, 아래와 같은 문제점이 일어났습니다.

임베디드 youtube 동영상이 포함 된 HTML을로드하고 표시하는 것이 매우 느립니다

요청이 중간에 중단됩니다.

콘솔에서 오류가 드물게 발생합니다

포함 태그의 코드는 다음과 같습니다.

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/<%= @video_id %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

html에 youtube 동영상을 삽입할 때 iframe 태그를 사용합니다.
youtube의 공식 참조

그러나 iframe 태그를 사용하면 html 렌더링을 할 때 전체 페이지를 읽은 후 iframe 태그 (동영상)를로드하는 것 같습니다.
작성한 포트폴리오에서는 대량의 youtube 동영상을 로드할 필요가 있었으므로 훌륭하게 문제에 직면했습니다.

개선책

<div class="youtube">
  <iframe data-src="https://www.youtube.com/embed/<%= @video_id %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

우선 iframe 태그의 src 속성으로 youtubeURL을 읽고 있었습니다만, data-src 속성으로 하는 것으로, html의 렌더링으로, 로드를 하는 일 없이, JavaScript 코드나 CSS로 사용할 수 있는 추가 데이터를 격납하는 것이 수 있습니다.

즉, iframe 태그내의 속성의 로드를 스루 하는 한편, 데이터는, 일단 피난해 두는 것으로 HTML의 읽어들여와 표시가, 원활하게 가는 것입니다. (잘못되면 지적해 주세요)

다음에 JavaScript(jQuery)의 기술입니다.

$(function(){
  $('.youtube').each(function() {
    let iframe = $(this).children('iframe');
    let url = iframe.attr('data-src');
    let id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    iframe.before('<img src="http://img.youtube.com/vi/'+id+'/mqdefault.jpg" />').remove();
    $(this).on('click', function() {
      $(this).after('<div class="youtube"><iframe src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>').remove();
    });
  });
}); 

여기에서는 data-src 속성으로 저장한 youtubeURL을 src 속성으로 대체하는 동작을 추가하고 있습니다.　
5·6행째의 기술이 중요합니다.
5행째에서는, 변수 id에, youtubeURL에 포함되는 video_id(동영상 정보)를 정규 표현과 match 메소드를 사용해, 끌어내고 있습니다.
6행째에서는 취득한 동영상 정보를 변수 id로서 img 태그에 대입합니다. 여기서 before 메서드에서 iframe 태그에 표시되는 것은 youtube의 미리보기 이미지입니다.　
HTML로 동영상을 읽는 대신 동영상 미리보기 이미지를 먼저 표시합니다.

썸네일 이미지를 클릭 액션에서 다시 iframe 태그를로드하고로드없이 렌더링이 원활하게 수행되었습니다.

포트폴리오의 일부 예입니다.
당초 HTML의 로딩에 30초~1분 정도 걸릴 때도 있었습니다만, 몇 초 정도로 개선되었습니다.



포트폴리오 사이트

도움이되면 다행입니다.
이상이 됩니다!