Responsive Cards Design | With Playable Thumbnails On Hover & Popup Modals - Html, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Responsive Cards Design | With Playable Thumbnails On Hover & Popup Modals - Html, CSS & Javascript
In this video, you will learn how to design these cards with a playable thumbnail on mouseover the thumbnail image and stop it on mouseleave. Each card's long titles are shortened with "..." using JQuery. And for each card, there is a popup modal screen to display each video in the modal screen.

Clear Coding
Easy to Follow

Video Source - http://pexels.com

Video 01 - www.pexels.com/video/a-long-and-winding-road-going-up-the-mountain-rock-plateau-3595383/

Video 02 - www.pexels.com/video/red-leaves-in-autumn-1777892/

Video 03 - www.pexels.com/video/girl-walking-on-the-grass-4524588/

Video 04 - www.pexels.com/video/dash-camera-footage-of-traveling-a-road-built-on-a-desert-3059073/

Video 05 - www.pexels.com/video/a-view-of-hot-air-balloons-in-the-air-and-woman-riding-her-vehicle-3015510/

Video 06 - www.pexels.com/video/blue-sky-with-white-clouds-timelapse-mode-1860175/

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How To Display Videos Using Cards | With Playable Thumbnails On Hover & On Click Video Modal Popup - Html, Css & Javascript</title>
  
  <link rel="stylesheet" href="style.css">
  
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<div class="video-card-container">
    
    <div class="video-card">
      <div class="video-card-body">
        <div class="video-thumbnail">
          <img src="thumbnail images/thumb1.png" class="thumb-img" alt="">
          <video src="videos/1.mp4" class="thumb-video" muted loop></video>
        </div>
        <p class="video-card-title" title="A Long And Winding Road Going Up The Mountain Rock Plateau">A Long And Winding Road Going Up The Mountain Rock Plateau</p>
        <div class="video-card-info">
          <a href="" class="user"><i class="uil uil-user"></i> Coding Snow</a>
          <span class="uploaded-time"><i class="uil uil-clock"></i> 1 day ago</span>
        </div>
      </div>
      <div class="video-modal-screen">
        <i class="uil uil-times vid-modal-close-btn"></i>
        <div class="video-modal-content">
          <video src="videos/1.mp4" class="modal-video" controls autoplay loop></video>
          <p class="modal-video-title">A Long And Winding Road Going Up The Mountain Rock Plateau</p>
          <div class="modal-video-info">
            <a href="" class="user"><i class="uil uil-user"></i> Coding Snow</a>
            <span class="uploaded-time"><i class="uil uil-clock"></i> 1 day ago</span>
          </div>
        </div>
      </div>
    </div>

</div>

//Jquery for go through each long title to short it with "..."

//Javascript for popup video modal screens on click the cards

//Javascript for modal close buttons

</script>

</body>
</html>

style.css

Buy This Project Complete Source Files from Here -

https://www.buymeacoffee.com/codingsnow/e/97085

Download File Setup

If the download didn't start automatically, click here.

Monday, October 24, 2022

Responsive Cards Design | With Playable Thumbnails On Hover & Popup Modals - Html, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Monday, October 24, 2022

Responsive Cards Design | With Playable Thumbnails On Hover & Popup Modals - Html, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form