<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://bootstraplily.com/demo/youtube-website-html/css/owl.carousel.css"> <link rel="stylesheet" href="https://bootstraplily.com/demo/youtube-website-html/css/owl.theme.default.css"> <script src="https://kit.fontawesome.com/b31e06099e.js" crossorigin="anonymous"></script> <div class="borer-bottom-new"> <div class="outer-space d-flex justify-content-between align-items-center"> <div class="logo-space"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/youtube-logo.jpg"> </div> <div class="search-space"> <div style="position:relative;"> <form> <input class="form-control" placeholder="Search"> </form> <div class="search-icon"> <i class="fa fa-search"></i> </div> </div> </div> <div class="d-flex align-items-center"> <div class=""> <a href=""><i class="fas fa-folder-plus mr-2 ml-2 mr-md-4"></i></a> </div> <div class=""> <a href=""><i class="fab fa-google-play mr-2 mr-md-4"></i></a> </div> <div class=""> <a href=""><i class="fas fa-bell mr-2 mr-md-4"></i></a> </div> <div class="dropdown"> <div class="thumb-circle dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/awesome-profile-pic-for-girl.jpg"> </div> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <!-----------header ends here---------------------> <div class="container-fluid m-0 p-0"> <div class="row no-gutters"> <div class="col-4 col-lg-2 sidebar-outer"> <div class="menu-block col-4 col-lg-2 fixed"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-home mr-3"></i> Home</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-fire mr-3"></i> Trending</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-envelope mr-3"></i> Subscription</a> </div> <hr> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-photo-video mr-3"></i> Library</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-history mr-3"></i> History</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-video mr-3"></i> Your videos</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Watch later</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-thumbs-up mr-3"></i> Liked videos</a> </div> <hr> <p class="ml-3 font-weight-bold">SUBSCRIPTIONS</p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-photo-video mr-3"></i> Popular on YouTube</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-history mr-3"></i> Music</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-video mr-3"></i> Sports</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Gaming</a> </div> <hr> <p class="ml-3 font-weight-bold">MORE FROM YOUTUBE</p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-photo-video mr-3"></i> YouTube Premium</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-history mr-3"></i> YouTube Movies</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-video mr-3"></i> Gaming</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Live</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Fahshion & Beauty</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Learning</a> </div> <hr> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-photo-video mr-3"></i> Setting</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-history mr-3"></i> Report history</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-video mr-3"></i> Help</a> <a href="#" class="list-group-item list-group-item-action"><i class="fas fa-clock mr-3"></i> Send feedback</a> </div> </div> </div> <div class="col-8 col-lg-10 col-md-8 pt-5 nn"> <div class="video-row"> <div class="d-flex justify-content-between align-items-center"> <h6 class="font-weight-bold py-2 pl-2">Video Row Heading</h6> <div> <a href=""><i class="far fa-times-circle pr-2"></i></a> </div> </div> <div class="owl-carousel"> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-14-empty-small-street-in-spain-4777.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/1.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-bird-walking-on-the-beach-1578584793241.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/2.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> </div> </div> <hr> <div class="video-row"> <div class="d-flex justify-content-between align-items-center"> <h6 class="font-weight-bold py-2 pl-2">Video Row Heading</h6> <div> <a href=""><i class="far fa-times-circle pr-2"></i></a> </div> </div> <div class="owl-carousel"> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-14-empty-small-street-in-spain-4777.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/1.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-bird-walking-on-the-beach-1578584793241.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/2.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> </div> </div> <hr> <div class="video-row"> <div class="d-flex justify-content-between align-items-center"> <h6 class="font-weight-bold py-2 pl-2">Video Row Heading</h6> <div> <a href=""><i class="far fa-times-circle pr-2"></i></a> </div> </div> <div class="owl-carousel"> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-14-empty-small-street-in-spain-4777.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/1.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/coverr-bird-walking-on-the-beach-1578584793241.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/2.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Agua-natural.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/3.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> <div class="video-info"> <video controls data-play="hover" muted="muted"> <source src="https://bootstraplily.com/demo/youtube-website-html/videos/Down_by_the_River.mp4" type="video/mp4"> </video> <div class="d-flex mt-2"> <div class="author-thumb"> <img src="https://bootstraplily.com/demo/youtube-website-html/img/4.jpg"> </div> <div class="author-info"> <h6 class="font-weight-bold mb-1"><a href="">What is Node js? | Why it is so Famous?</a></h6> <p class="text-muted">Nick John</p> <span class="text-muted font-weight-bold small">71K views - 2 weeks ago</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div> <script src="https://bootstraplily.com/demo/youtube-website-html/js/owl.carousel.js"></script> <script src="https://bootstraplily.com/demo/youtube-website-html/js/jquery.hoverplay.js"></script>

body{ font-family: 'Roboto', sans-serif; color: #727E8C; } .borer-bottom-new{ border-bottom:2px solid #f3f3f3; padding:10px; position:fixed; width:100%; z-index:9; background-color:#FFF; } .outer-space{ max-width:1920px; margin:0 auto; padding:0 10px; } .logo-space{ width:100px; float:left; } .logo-space img{ width:100%; height:auto; } .search-space{ width:45%; float:left; } .search-icon{ position:absolute; top:7px; right:10px; } .search-icon i{ color:#999; font-size:13px; } .link-space{ width:40%; float:left; } .thumb-circle img { width: 30px; height: 30px; border-radius: 50px; cursor:pointer; } .dropdown-item-text{ font-weight:bold; } .left-navigation{ width:300px; } .list-group-item{ border:0; } .video-info{ padding:0 10px; } .video-info video{ width:100%; height:auto; cursor:pointer; } .author-thumb img{ width:40px !important; height:40px; border-radius:60px; margin-right:20px; } .author-info p{ font-size:13px; margin-bottom:-3px; } .menu-block{ max-height:900px; overflow:hidden; background-color:#FFF; font-size:14px; font-weight:500; } div.menu-block:hover { overflow: auto; } div.menu-block::-webkit-scrollbar { width: 11px; } div.menu-block::-webkit-scrollbar-thumb { background-color: #CFD8DC ; border-radius: 6px; border: 3px solid #fff; } a{ color: #3a434e; } .nn{ margin-top:16px; } .sidebar-outer { margin-top: 64px; position: relative; } .fixed { position: fixed; } @media screen and (max-width: 700px) { .menu-block{ font-size:13px; } .menu-block i{ display:none; } }

$(document).ready(function(){ $(".owl-carousel").owlCarousel({ dots:false, responsiveClass:true, responsive:{ 0:{ items:1, nav:false }, 600:{ items:2, nav:false }, 1000:{ items:4, nav:false, loop:false } } }); }); $(function(){ $('#videoID').hoverPlay(); });