웹사이트 체류 시간 늘리는 동영상 팝업 구현 방법과 유튜브 API 활용 마우스 오버 미리보기 기능 제작 방법을 소개합니다. 사용자 경험(UX) 향상을 위한 인터랙티브 툴팁 디자인과자바스크립트 기반 동적 동영상 삽입 및 자동 재생 최적화를 통해 미디어 콘텐츠 마크업을 완성할 수 있습니다.
웹사이트와 블로그에서 사용자 체류 시간을 향상시키기 위해 마우스 오버 시 동영상을 미리 보기 팝업 창으로 표시하는 기능을 구현하는 것은 매우 유용한 방법입니다. 이미지나 텍스트 링크 위에 마우스를 올렸을 때 관련된 동영상을 자동으로 표시해 주면, 사용자는 별도의 클릭 없이도 정보를 즉각적으로 확인하게 됩니다.
툴팁 활용을 활용해서 동영상, 이미지 콘텐츠 미리보기
마우스 오버 시 동영상을 미리 보기 팝업 창으로 표시하는 기능을 활용하면 웹사이트나 블로그를 좀 더 동적으로 보이게 할 수 있습니다. 특히, 이미지나 텍스트 링크를 마우스로 오버했을 때 관련된 동영상을 보여주는 방법은 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 마우스 오버 시 동영상 팝업창을 표시하는 방법을 단계별로 설명하겠습니다.
| 구분 | 일반 텍스트 링크 | 동영상 팝업 링크 |
|---|---|---|
| 사용자 참여도 | 낮음 | 매우 높음 |
| 정보 전달 속도 | 보통 (읽기 필요) | 빠름 (시각적 확인) |
링크에 동영상 팝업창 표시 방법
기본적으로 설정된 툴팁을 수정하려면 링크 코드에 클래스 속성과 이미지 및 동영상 링크를 추가해 주어야 합니다. 이미지만 사용할 경우는 ‘[링크 팝업창 수정법] 마우스 오버 시 나타나는 팝업창의 역할, 수정 방법‘ 글에 있는 내용을 확인하시면 됩니다. 자바스크립트 기반 동적 동영상 삽입 및 자동 재생 최적화를 통해 모든 링크를 효율적으로 관리할 수 있습니다.
1. 기본 HTML 및 데이터 설정
`data-video`와 `data-image` 속성을 활용하여 유튜브 URL과 썸네일을 저장합니다. 이는 사용자 인터페이스(UI) 접근성을 높이는 효과적인 데이터 바인딩 방식입니다.
a href="#" class="tooltip" title="이 링크에 대한 추가 정보"
data-image="https://이미지경로/img.gif"
data-video="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
링크 텍스트/a
2. JavaScript 동적 비디오 로직
마우스 오버 시 유튜브 API 활용 마우스 오버 미리보기 기능을 구현합니다. 유튜브 URL에서 비디오 ID를 추출하여 음소거 상태로 자동 재생되도록 설정합니다.
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 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/(?:[^/
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
Q1. 동영상 팝업이 검색 노출에 불리할 수도 있나요?
A1. 툴팁 안의 텍스트나 비디오 내용은 검색 엔진이 직접 인덱싱하지 않을 수 있습니다. 따라서 핵심 키워드는 본문 일반 텍스트에 반드시 포함하여 검색 노출 상태 점검 시 누락되지 않도록 주의해야 합니다.
Q2. 유튜브 링크 외의 동영상도 가능한가요?
A2. MP4 등의 직접 링크도 가능하지만, 로딩 속도와 트래픽 관리를 위해 유튜브 iframe 방식을 사용하는 것이 자바스크립트 기반 동적 동영상 삽입 시 가장 안정적입니다.
Q3. 모바일에서 팝업이 화면을 가리면 어떡하죠?
A3. 미디어 쿼리를 사용하여 모바일에서는 툴팁의 너비를 조절하거나 반응형 웹 디자인 툴팁 가독성 높이기 전략을 통해 화면 하단에 고정하는 방식으로 구현할 수 있습니다.