[링크 팝업창 수정법-1 ] 링크에 미리보기 동영상 팝업창 표시방법

링크에 미리 보기 자동 재생되는 동영상 팝업 구현하기

웹사이트와 블로그에서 사용자 체류 시간을 향상시키기 위해 마우스 오버 시 동영상을 미리 보기 팝업 창으로 표시하는 기능을 구현하는 것은 매우 유용한 방법입니다. 예를 들어, 이미지나 텍스트 링크 위에 마우스를 올렸을 때 관련된 동영상을 자동으로 표시해 주면, 사용자는 클릭하지 않고도 간편하게 미리 정보를 확인할 수 있습니다. 이러한 방식은 사용자에게 콘텐츠를 더 쉽게 확인할 수 있게 해 주며, 특히 시각적 콘텐츠를 활용하면서 사용자의 체류 시간을 증가시키고, 다른 콘텐츠로의 이동을 유도할 수 있습니다.

동영상 팝업 창 제작
멀티미디어 링크 활용
툴팁 활용을 활용해서 동영상,이미지 콘텐츠 미리보기

마우스 오버 시 동영상을 미리 보기 팝업 창으로 표시하는 기능을 활용하면 웹사이트나 블로그를 좀 더 동적으로 보이게 할 수 있습니다. 특히, 이미지나 텍스트 링크를 마우스로 오버했을 때 관련된 동영상을 보여주는 방법은 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 마우스 오버 시 동영상 팝업창을 표시하는 방법을 단계별로 설명하겠습니다. HTML, JavaScript, CSS를 이용해 간단히 구현할 수 있는 방법을 통해 웹사이트의 콘텐츠를 더욱 동적으로 만드는 방법을 소개합니다.

링크에 동영상 팝업창 표시 방법

기본적으로 설정된 툴팁을 수정하려면 링크 코드에 클래스 속성과 이미지 및 동영상 링크를 추가해 주어야 합니다. 이 방법을 수동으로 처리하게 되면 기존에 제작한 모든 링크를 수정해야 하는 불편함이 발생할 수 있습니다. 따라서 공통 클래스 속성은 자바스크립트를 통해 자동으로 설정하고, 개별적으로 링크에 연결되는 이미지와 동영상은 각 콘텐츠에 맞게 운영자가 추가하는 방식으로 사용합니다.

이미지만 사용할 경우는 '[링크 팝업창 수정법] 마우스 오버 시 나타나는 팝업창의 역할, 수정 방법' 글에 있는 내용을 확인하시면 됩니다.

1. 기본 HTML 설정하기

우선, 링크와 관련된 콘텐츠를 포함한 기본 HTML 구조를 만듭니다. 여기서 data-video 속성에 동영상 URL을 저장하여 해당 링크에 마우스를 올렸을 때 동영상을 불러오도록 설정합니다.

<a href="#" class="tooltip" title="이 링크에 대한 추가 정보" 
data-image="https://이미지경로/img.gif" 
data-video="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  링크 텍스트
</a>

2. JavaScript로 동영상 삽입

동영상을 동적으로 팝업 창에 삽입하려면 JavaScript를 사용해야 합니다. 유튜브 URL에서 비디오 ID를 추출하고 이를 기반으로 iframe을 생성하여 팝업 창에 삽입합니다.

<script>
window.onload = function() {
  var links = document.querySelectorAll('a[title]');
  links.forEach(function(link) {
    link.addEventListener('mouseover', function() {
  
      var tooltipText = document.createElement('span');
      tooltipText.classList.add('tooltiptext');
      tooltipText.textContent = link.getAttribute('title'); 

      var imageUrl = link.getAttribute('data-image');
      if (imageUrl) {
        var tooltipImage = document.createElement('img');
        tooltipImage.src = imageUrl;
        tooltipImage.alt = "Tooltip Image";
        tooltipImage.style.width = "100%";
        tooltipText.appendChild(tooltipImage);
      }

      var videoUrl = link.getAttribute('data-video');
      if (videoUrl) {
        var videoId = getYouTubeVideoId(videoUrl);
        if (videoId) {
          var youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0`;
          var tooltipVideo = document.createElement('iframe');
          tooltipVideo.src = youtubeEmbedUrl;
          tooltipVideo.width = "100%";
          tooltipVideo.height = "200";
          tooltipVideo.frameBorder = "0";
          tooltipVideo.allow = "autoplay; encrypted-media";
          tooltipText.appendChild(tooltipVideo);
        }
      }

      link.classList.add('custom-tooltip');
      link.appendChild(tooltipText);
    });

    link.addEventListener('mouseout', function() {
      var tooltipText = link.querySelector('.tooltiptext');
      if (tooltipText) {
        link.removeChild(tooltipText); 
      }
    });
  });
};

function getYouTubeVideoId(url) {
  var regex = /(?:https?:\/\/(?:www\.)?youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*\?v=)|https?:\/\/youtu\.be\/)([a-zA-Z0-9_-]{11})/;
  var match = url.match(regex);
  return match ? match[1] : null;
}

</script>

반응형

3. CSS로 툴팁 스타일 설정하기

툴팁을 동영상 팝업창처럼 보이게 하기 위해 CSS를 사용하여 스타일링합니다. 툴팁은 마우스 오버 시에만 보이고, 일반적으로 숨겨지도록 설정합니다.

.custom-tooltip .tooltiptext {
  position: absolute;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  line-height: 1.5;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.custom-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.custom-tooltip .tooltiptext img,
.custom-tooltip .tooltiptext iframe {
  width: 100%;
  max-width: 560px;  /* 최대 너비를 560px로 설정 (유튜브 기본 사이즈) */
  height: auto;
  aspect-ratio: 16 / 9;  /* 16:9 비율을 유지 */
  object-fit: contain;
  margin-top: 10px;
}

4. 동작 확인

이제 링크에 마우스를 올리면 툴팁이 나타나고, 동영상이 자동으로 재생되는 팝업 창이 표시됩니다. 동영상의 크기는 화면 크기에 맞게 조정되며, iframe은 16:9 비율로 유지됩니다.

• 링크에 마우스를 올리면 관련된 동영상이 팝업으로 표시되며, 자동으로 재생됩니다.
• 동영상의 크기는 화면 크기에 맞게 최적화되며, 비율을 유지하면서 표시됩니다.
• iframe을 통해 유튜브 동영상이 삽입되어, 동영상이 자동 재생되고 음소거됩니다.

이 방법을 사용하면 마우스 오버 시 동영상을 팝업 창으로 표시할 수 있습니다. 이 기능은 웹사이트에서 추가적인 정보나 미디어를 보여줄 때 매우 유용하며, 사용자에게 직관적인 경험을 제공할 수 있습니다. 동영상 외에도 이미지, 텍스트 등의 콘텐츠를 툴팁으로 표시할 수 있어 다양한 방식으로 활용할 수 있습니다.