Tutorial
Advanced Video-Player
Advanced Video-Player – Video-Player mit Hover-Effekt und Play-Button.
HTML
<div class="video-outer">
<div class="video-wrap">
<div class="video-play-btn"><svg
viewBox="0 0 100 100"
width="40"
height="40"
aria-hidden="true"
focusable="false"
>
<polygon points="35,22 35,78 78,50" fill="currentColor" />
</svg></div>
<video>
<source src="video.mp4" type="video/mp4">// Hier die URL anpassen
Dein Browser unterstützt das Video-Element nicht.
</video>
</div>
</div>
Select Code
CSS
.video-outer {
width: 100%;
max-width:600px;
margin:auto;
}
.video-wrap {
position: relative;
width: 100%;
visibility: hidden;
}
.video-wrap video {
display: block;
width: 100%;
height: auto;
}
.video-play-btn {
width:70px;
height:70px;
background:#f00;
position: absolute;
top:50%;
left:50%;
border-radius: 70px;
transform: translate(-50%,-50%);
z-index: 2;
transition:transform 0.3s;
pointer-events: none;
}
.video-play-btn svg {
color:#fff;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.video-wrap:hover .video-play-btn{
transform: translate(-50%,-50%) scale(1.2);
}
Select Code
jQuery
(function ($) {
function setVideo() {
$(".video-outer video").each(function () {
const video = this;
const $video = $(video);
const $wrap = $video.closest(".video-wrap");
function updateRatio() {
if (!video.videoWidth || !video.videoHeight) {
return;
}
$(".video-wrap").css("visibility", "visible");
$wrap.css(
"aspect-ratio",
`${video.videoWidth} / ${video.videoHeight}`
);
}
if (video.readyState >= 1) {
updateRatio();
} else {
$video.one("loadedmetadata", updateRatio);
}
});
}
setVideo();
$(".video-outer video").hover(
function () {
$(this).prop("controls", true);
},
function () {
$(this).prop("controls", false);
}
);
$(".video-outer video").on("play", function () {
$(this).closest(".video-wrap").find(".video-play-btn").hide();
});
$(".video-outer video").on("pause ended", function () {
$(this).closest(".video-wrap").find(".video-play-btn").show();
});
$(window).on("resize", setVideo);
})(jQuery);
Select Code