링크에 마우스 올리면 동영상이 바로 재생되는 팝업 만드는 법

웹사이트나 블로그에 방문한 사람들이 조금 더 오래 머물렀으면 하는 고민, 다들 한 번쯤 해보셨을 거예요. 그럴 때 마우스만 쓱 올려도 관련 동영상이 미리 보기로 나오는 기능을 넣으면 정말 효과적인데요. 클릭하지 않아도 내용을 바로 알 수 있어서 방문자가 훨씬 편하게 정보를 얻을 수 있거든요.

이미지나 텍스트 링크 위에 마우스를 올렸을 때 관련된 영상이 자동으로 나오면 시선을 확 끌 수 있어요. 사용자가 별도의 클릭 없이도 정보를 즉각적으로 확인할 수 있어 사이트가 훨씬 생동감 있게 변한답니다.

툴팁으로 동영상과 이미지 미리 보여주기

마우스를 올렸을 때 짠하고 나타나는 팝업 창을 활용하면 블로그를 좀 더 다채롭게 꾸밀 수 있어요. 특히 텍스트 링크에 마우스를 뒀을 때 관련된 동영상을 보여주는 방식은 방문자에게 아주 좋은 인상을 남길 수 있죠. 이 글에서는 마우스 오버 시 동영상 팝업창을 띄우는 방법을 차근차근 알려드릴게요.

구분	일반 텍스트 링크	동영상 팝업 링크
사용자 참여도	낮음	매우 높음
정보 전달 속도	보통 (읽어야 함)	빠름 (눈으로 확인)

링크에 동영상 팝업 띄우는 구체적인 방법

기본적인 툴팁 기능을 좀 더 멋지게 꾸미려면 링크 코드에 약간의 정보를 더해주면 돼요. 이미지만 띄우는 방법은 예전에 다룬 적이 있는데, 이번에는 자바스크립트를 활용해서 동영상이 자동으로 재생되게 만들어 볼 거예요. 이렇게 하면 링크 관리가 훨씬 편해져요.

1. HTML 태그에 데이터 설정하기

우선 `data-video`와 `data-image`라는 속성을 써서 유튜브 주소와 썸네일 이미지를 지정해 줘야 해요. 이렇게 데이터를 미리 연결해 두면 나중에 화면에 띄울 때 아주 편하답니다.

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

2. 자바스크립트로 자동 재생 기능 넣기

이제 마우스를 올렸을 때 유튜브 영상이 나오도록 자바스크립트를 작성할 차례예요. 유튜브 주소에서 영상 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|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
var match = url.match(regex);
return match ? match[1] : null;
}
</script>