CodePen Embed - Vimeo/YouTube video with cover image

<body>	

		<div class="section">	
			<div class="blur-img"></div>
			<div class="blur-img-over"></div>
			<div class="video-container">	
				<div class="wrap-rel">
					<div class="container">
						<div class="row justify-content-center">
							<div class="col-8">
								<div class="video-section">
									<figure class="vimeo"> 
										<a href="https://www.youtube.com/embed/2GBzYu59YLQ" class="">
											<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg" alt="image"/>
										</a>
									</figure>
								</div>					
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Page cursor
		================================================== -->
		
        <div class='cursor' id="cursor"></div>
        <div class='cursor2' id="cursor2"></div>
        <div class='cursor3' id="cursor3"></div>
    
<!-- Link to page
	================================================== -->

  <a href="https://themeforest.net/user/harunpehlivan"      class="link-to-portfolio hover-target" target=”_blank”       ></a>
 </body>

body{
	cursor: none;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #fff;
	height: 10px;
	width: 10px;
	z-index: 99999;
	box-shadow: 0 0 22px 0 rgba(255,255,255, 0.6);
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	opacity: 0;
	background: rgba(255,255,255,.03);
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
	transform:scale(2.2) translateX(-25%) translateY(-25%);
	border:none;
}
.video-cursor .cursor{
	opacity: 0;
}
.logo-cursor .cursor{
	opacity: 0;
}
.logo-cursor .cursor2,
.logo-cursor .cursor3{
	-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
	transform:scale(2.2) translateX(-25%) translateY(-25%);
	border:none; 
	opacity: 1;
}
.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
}
.blur-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 8;
	display: block;
	background-size: cover;
	background-position: center;
	background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg");
	filter: blur(6px);
}
.blur-img-over{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  border: 10px solid #060606;
	z-index: 9;
	display: block;
}

/* Video
================================================== */

.wrap-rel {
	position: relative;
	width: 100%;
	display: block;
}
.video-container {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 10;
	display: block;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* #Video wrapper
================================================== */

.video-section {
	position: relative;
	width:100%;
	margin:0 auto;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.45);
}
.video-wrapper, figure.vimeo, figure.youtube {
	margin:0;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
}	
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	
figure.youtube a img, figure.vimeo a img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
	max-width:none;
}	
figure.vimeo a:after, figure.youtube a:after {
	content:"";
	width:60px;
	height:60px;
	background: #fff;
	z-index:9;
	position:absolute;
	top:50%;
	left:50%;
	margin:-30px 0 0 -30px;
	border-radius:50%;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
	cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
figure.vimeo:hover a:after, figure.youtube:hover a:after {
	box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
}
figure.vimeo:hover a:after, figure.youtube:hover a:after{
	opacity: 0;
}
figure.vimeo a:before, figure.youtube a:before {
	border-left: 8px solid #212121;
}
figure.vimeo a:before, figure.youtube a:before {
	content:"";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	z-index:10;
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -3px;
	margin-top: -5px;
	display:block;
	cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
	border-color: transparent;
}	
figure.vimeo a:hover img, figure.youtube a:hover img {
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}	
figure.vimeo a img, figure.youtube a img {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
	border-radius: 10px;
	cursor: url('http://www.ivang-design.com/svg-load/play.png') 30 30,pointer;
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('https://ivang-design.com/ig-logo.jpg');
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
}

/*! FitVids */
!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null};if(!document.getElementById("fit-vids-style")){var r=document.createElement("div"),a=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0],o="&shy;<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";r.className="fit-vids-style",r.id="fit-vids-style",r.style.display="none",r.innerHTML=o,a.parentNode.insertBefore(r,a)}return e&&t.extend(i,e),this.each(function(){var e=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];i.customSelector&&e.push(i.customSelector);var r=t(this).find(e.join(","));r=r.not("object object"),r.each(function(){var e=t(this);if(!("embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){var i="object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height(),r=isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10),a=i/r;if(!e.attr("id")){var o="fitvid"+Math.floor(999999*Math.random());e.attr("id",o)}e.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*a+"%"),e.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto);

(function($) { "use strict";

		
	//Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
		t.style.top = n.clientY + "px", 
		e.style.left = n.clientX + "px", 
		e.style.top = n.clientY + "px", 
		i.style.left = n.clientX + "px", 
		i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }

	$('.video-section').on('mouseover', function(event) {				
		$('body').addClass('video-cursor');
	});				
	$('.video-section').on('mouseout', function(event) {		
		$('body').removeClass('video-cursor');
	});
	$('.link-to-portfolio').on('mouseover', function(event) {				
		$('body').addClass('logo-cursor');
	});				
	$('.link-to-portfolio').on('mouseout', function(event) {		
		$('body').removeClass('logo-cursor');
	});

	
	$(document).ready(function() {
				
		/* Video */
		
		$(".container").fitVids();
						
		$('.vimeo a,.youtube a').on('click', function (e) {
			e.preventDefault();
			var videoLink = $(this).attr('href');
			var classeV = $(this).parent();
			var PlaceV = $(this).parent();
			if ($(this).parent().hasClass('youtube')) {
				$(this).parent().wrapAll('<div class="video-wrapper">');
				$(PlaceV).html('<iframe frameborder="0" height="333" src="' + videoLink + '?autoplay=1&showinfo=0" title="YouTube video player" width="547"></iframe>');
			} else {
				$(this).parent().wrapAll('<div class="video-wrapper">');
				$(PlaceV).html('<iframe src="' + videoLink + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color=8c6acc" width="500" height="281" frameborder="0"></iframe>');
			}
		});	
					
	});
	
  })(jQuery);

This Pen is owned by HARUN PEHLİVAN on CodePen. It is a fork of this Pen.

See more by @harunpehlivan on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

External CSS

External JavaScript