Code điều chỉnh kích thước iframe YouTube video trong bài viết

Code điều chỉnh kích thước khung video YouTube trên website – Nhúng video YouTube vào nội dung bài viết giúp người viết có thể dễ dàng đưa những nội dung của mình muốn truyền đạt đến người đọc.

Thông thường video youtube sẽ được nhúng qua thẻ iframe với kích thước cố định khiến nên không thể làm độ rộng của video bằng khung của bài viết (100% width) với độ cao phù hợp một cách tự động.

Đặc biệt là trên các blogspot, nếu template không hỗ trợ, khung video của YouTube không đẹp và lọt thỏm vào phía trong bài viết như hình bên dưới.

Thế này có lẽ sẽ đẹp hơn phải không? 2 khoảng đen trên video cũng mất đi do độ rộng và chiều cao của video đã được chỉnh theo tỉ lệ 16:9

Để làm được điều này, các bạn hãy nhúng đoạn code bằng javascript sau vào website

<script>
    // JavaScript to adjust the size of all YouTube iframes
    var iframes = document.querySelectorAll('iframe[src*="youtube.com"]'); // Select all YouTube iframes

    // Function to adjust the size of an individual iframe
    function adjustVideoSize(iframe) {
        var aspectRatio = 9 / 16; // 16:9 aspect ratio (width / height)
        var containerWidth = iframe.parentElement.offsetWidth;
        var containerHeight = containerWidth * aspectRatio;

        iframe.style.width = containerWidth + 'px';
        iframe.style.height = containerHeight + 'px';
    }

    // Loop through all selected iframes and adjust their size
    for (var i = 0; i < iframes.length; i++) {
        adjustVideoSize(iframes[i]);
    }

    // Call the adjustVideoSize function again when the window is resized
    window.addEventListener('resize', function() {
        for (var i = 0; i < iframes.length; i++) {
            adjustVideoSize(iframes[i]);
        }
    });
</script>

Ở đây bạn sẽ phải thay .blog-posts thành class (CSS) chứa bài viết của bạn có độ rộng mà bạn mong muốn. Đến đây thì hơi rối xíu. Bạn phải có chút kiến thức lập trình sẽ thực hiện được. Nếu không hãy bình luận phía dưới bài viết để mình hỗ trợ.

Để điều chỉnh kích thước khung YouTube trên bài viết có nhiều cách, sử dụng javascript, css…Đây là một cách hay và đơn giản mà mình áp dụng cho website. Chúc các bạn thành công.

Tài liệu tham khảo: https://stackoverflow.com/questions/39465395/youtube-video-100-width-and-custom-height