Tạo Danh Sách Xem Video YouTube

Chia Sẻ Code: Tạo Danh Sách Xem Video YouTube Responsive với Thumbnail Tự Động

Nếu bạn đang tìm cách hiển thị danh sách video YouTube trên blog của mình một cách hấp dẫn và dễ dàng, thì bài viết này chính là dành cho bạn! Với mã code dưới đây, bạn có thể tạo một danh sách video YouTube responsive, cho phép người dùng xem video trực tiếp và duyệt qua các video khác trong danh sách. Đặc biệt, mỗi video sẽ có thumbnail tự động được lấy từ YouTube, giúp người dùng dễ dàng nhận diện nội dung.

Mã code

<style>

/*<![CDATA[*/

.video-container{display:flex;gap:20px;padding:20px;max-width:1200px;margin:auto;border:2px solid #e1e1e1;border-radius:12px;background-color:#f9f9f9;box-shadow:0 8px 16px rgba(0,0,0,0.1)}

.video-player{flex:2;display:flex;align-items:center;justify-content:center}

.video-player iframe{width:100%;height:400px;border:none;border-radius:8px}

.playlist{flex:1;background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1);max-height:400px;overflow-y:auto;border:1px solid #ddd}

.playlist ul{list-style:none;padding:0;margin:0}

.playlist li{padding:12px;cursor:pointer;border-bottom:1px solid #ddd;transition:background 0.3s,color 0.3s;border-radius:4px}

.playlist li:hover{background:#007bff;color:white}

.playlist li.active{background:#007bff;color:white}

@media (max-width:768px){.video-container{flex-direction:column}.video-player iframe{height:250px}.playlist{max-height:none}}

/*]]>*/

</style>

<div class="video-container">

  <div class="video-player">

    <iframe id="videoFrame" width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>

  </div>

  <div class="playlist">

    <ul id="playlist">

      <li data-video-id="pkwyh5QWqT4">Video 1: Trình Nghe Nhạc MP3</li>

      <li data-video-id="tIX9lkhIr_4">Video 2: Dịch Vụ Code App Script </li>

      <li data-video-id="fwPiIinDXd8">Video 3: Cài Ngôn Ngữ Cho Bloggeru</li>

      <!-- Thêm các video khác ở đây -->

    </ul>

  </div>

</div>

<script>

//<![CDATA[

document.addEventListener('DOMContentLoaded', () => {

    const videoFrame = document.getElementById('videoFrame');

    const playlistItems = document.querySelectorAll('#playlist li');

    if (playlistItems.length > 0) {

        const firstItem = playlistItems[0];

        firstItem.classList.add('active');

        const videoId = firstItem.getAttribute('data-video-id');

        videoFrame.src = `https://www.youtube.com/embed/${videoId}`;

    }

    playlistItems.forEach(item => {

        item.addEventListener('click', () => {

            playlistItems.forEach(li => li.classList.remove('active'));

            item.classList.add('active');

            const videoId = item.getAttribute('data-video-id');

            videoFrame.src = `https://www.youtube.com/embed/${videoId}`;

        });

    });

});

//]]>

</script>

Hướng Dẫn Sử Dụng

• Tạo khung: Copy và dán mã code  vào nơi bạn muốn hiển thị danh sách video trên blog của mình.
• Thêm video: Chỉnh sửa các phần tử trong danh sách <ul> để thêm video của bạn. Đảm bảo rằng bạn cung cấp đúng ID video trong thuộc tính data-video-id.
• Tận hưởng: Khi người dùng nhấp vào bất kỳ video nào trong danh sách, video sẽ tự động được phát trong iframe và thumbnail sẽ hiển thị một cách hấp dẫn.

Kết Luận

Với mã code này, bạn có thể dễ dàng tạo một danh sách video YouTube đẹp mắt và chuyên nghiệp cho blog của mình. Việc tự động hiển thị thumbnail giúp tăng tính tương tác và trải nghiệm người dùng. Hãy thử nghiệm ngay hôm nay và nâng cao nội dung của bạn!