Vimeo Youtube Video With Cover Image
close
Vimeo Youtube Video With Cover Image

Vimeo Youtube Video With Cover Image

Vimeo Youtube Video With Cover Image

Make cover image for your youtube or vimeo video players.


What's happening programmers today we are going to create Vimeo Youtube Video With Cover Image. As you know the HTML markup is vital for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vimeo/YouTube video with cover image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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://player.vimeo.com/video/233536312" class="">
<img src="http://www.ivang-design.com/svg-load/video.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/ig_design/portfolio"
class="link-to-portfolio hover-target" target=”_blank”
></a>
</body>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


Our HTML markup is done.


Without CSS our this script (Vimeo Youtube Video With Cover Image) will never look cute. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

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("http://www.ivang-design.com/svg-load/video.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);
}


Customizations are completed.


So we have written HTML markup and customised it and now we will add some functionality in this project (Vimeo Youtube Video With Cover Image).



To make this project (Vimeo Youtube Video With Cover Image) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Vimeo Youtube Video With Cover Image) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

/*! 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="­<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&byline=0&portrait=0&autoplay=1&color=8c6acc" width="500" height="281" frameborder="0"></iframe>');
   }
  }); 
     
 });
 
  })(jQuery);

Functionality added now.




Closure :

So here we are, We have done and our project Vimeo Youtube Video With Cover Image is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Vimeo Youtube Video With Cover Image
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Vimeo Youtube Video With Cover Image) File :

Vimeo Youtube Video With Cover Image.zip
File Size 4.82 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.



Thank you !
Disqus Codes

No comments

Notifications

Disqus Logo