Адаптивный дизайн карточек с воспроизводимыми миниатюрами при наведении курсора мыши и всплывающим модальным окном для просмотра видео

В этом видео вы узнаете, как создать эти открытки с воспроизводимыми миниатюрами при наведении курсора мыши на изображение миниатюры и остановить его при нажатии мыши. Длинные заголовки каждой открытки сокращены с помощью "..." с помощью jQuery. И для каждой карточки есть всплывающий модальный экран для отображения каждого видео на модальном экране.

Все файлы, изображений, видео и готовый код проекта доступны для скачивания с этой страницы. Нажмите кнопку "СКАЧАТЬ"

СКАЧАТЬ

Подготовленные Исходные Коды

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>
  <!--========== Main style sheet ==========-->
  <link rel="stylesheet" href="style.css">
  <!--========== Unicons iconscout ==========-->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  <!--========== Jquery ==========-->
  <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>

  <script>
    //Javascript for play & pause video card thumbnails on mouseover/mouseleave

    //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>

CSS КОД:


/*======= Google fonts =======*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*======= Main Css =======*/
*{
    font-family: 'Poppins',sans-serif;
}

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

/*======= Video card modal screen =======*/

/*======= Media queries (max-width: 800px) =======*/