<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画モーダル</title>
<style>
body { font-family: Arial, sans-serif; }
.modal {
visibility: hidden;
opacity: 0;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
display: flex;
transition: opacity 0.3s ease-in-out;
}
.modal.active {
visibility: visible;
opacity: 1;
}
.modal-content {
position: relative;
width: 80%;
max-width: 800px;
}
.modal video {
width: 100%;
display: block;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
border: none;
font-size: 18px;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 24px;
border: none;
cursor: pointer;
padding: 10px 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
body.no-scroll {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 自動再生動画（サムネイル） -->
<video class="thumbnail" data-modal="videoModal" autoplay muted loop width="300">
<source src="sample.mp4" type="video/mp4">
お使いのブラウザは動画タグをサポートしていません。
</video>
<!-- モーダル -->
<div class="modal" data-modal="videoModal">
<div class="modal-content">
<button class="close-btn">×</button>
<video>
<source src="" type="video/mp4">
</video>
<button class="play-btn">▶</button>
</div>
</div>
<script>
// サムネイル動画をクリックしたらモーダルを開く
document.querySelectorAll(".thumbnail").forEach(video => {
video.addEventListener("click", () => {
const modal = document.querySelector(`.modal[data-modal='${video.dataset.modal}']`);
const modalVideo = modal.querySelector("video");
// 動画のソースを直接設定
modalVideo.src = video.querySelector("source").src;
modalVideo.load();
modal.classList.add("active");
document.body.classList.add("no-scroll");
});
});
// モーダルの操作
document.querySelectorAll(".modal").forEach(modal => {
const closeButton = modal.querySelector(".close-btn");
const playButton = modal.querySelector(".play-btn");
const modalVideo = modal.querySelector("video");
// モーダルを閉じる
closeButton.addEventListener("click", () => {
modal.classList.remove("active");
modalVideo.pause();
modalVideo.currentTime = 0;
document.body.classList.remove("no-scroll");
});
// 再生・停止切り替え
const togglePlay = () => {
if (modalVideo.paused) {
modalVideo.play();
playButton.style.display = "none";
} else {
modalVideo.pause();
playButton.style.display = "flex";
}
};
playButton.addEventListener("click", togglePlay);
modalVideo.addEventListener("click", togglePlay);
});
</script>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme