<head>
<style>
.cus-embed-youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.cus-embed-youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.cus-embed-youtube .cus-embed-youtube-play {
width: 68px;
height: 48px;
background-color: #333;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.cus-embed-youtube .cus-embed-youtube-play:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.cus-embed-youtube img,
.cus-embed-youtube .cus-embed-youtube-play {
cursor: pointer;
}
.cus-embed-youtube img,
.cus-embed-youtube iframe,
.cus-embed-youtube .cus-embed-youtube-play,
.cus-embed-youtube .cus-embed-youtube-play:before {
position: absolute;
}
.cus-embed-youtube .cus-embed-youtube-play,
.cus-embed-youtube .cus-embed-youtube-play:before {
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.cus-embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.cus-embed-youtube .cus-embed-youtube-play:hover {
background-color: #f00;
}
</style>
</head>
<body>
<?php
$url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $match);
$youtube_id = $match[1];
if(!empty($youtube_id)){
?>
<!-- 1. Video Wrapper Container -->
<div class="cus-embed-youtube" data-video-id="<?php echo $youtube_id; ?>">
<!-- 2. The preview button that will contain the Play icon -->
<div class="cus-embed-youtube-play"></div>
</div>
<?php
}
?>
<!-- 1. Video Wrapper Container -->
<div class="cus-embed-youtube" data-video-id="dQw4w9WgXcQ">
<!-- 2. The preview button that will contain the Play icon -->
<div class="cus-embed-youtube-play"></div>
</div>
</body>
<script>
(function(){
let YouTubeContainers = document.querySelectorAll(".cus-embed-youtube");
// Iterate over every YouTube container you may have
for (let i = 0; i < YouTubeContainers.length; i++) {
let container = YouTubeContainers[i];
let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg";
// Load the Thumbnail Image asynchronously
let image = new Image();
image.src = imageSource;
image.addEventListener("load", function() {
container.appendChild(image);
});
// When the user clicks on the container, load the embedded YouTube video
container.addEventListener("click", function() {
let iframe = document.createElement( "iframe" );
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
// Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it
iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");
// Clear Thumbnail and load the YouTube iframe
this.innerHTML = "";
this.appendChild( iframe );
});
}
})();
</script>
</html>
