Sửa lỗi hiển thị video khi nhúng Youtube vào WordPress

WordPress có tính năng tự động nhúng (oEmbed) khá tiện lợi – bạn chỉ cần dán link YouTube vào bài viết và nó sẽ tự động chuyển thành video có thể xem được.

Tuy nhiên, video nhúng mặc định thường gặp một số vấn đề về hiển thị ngoài frontend website

Vấn Đề Thường Gặp

• ❌ Video có kích thước cố định (width=”1020″ height=”765″), không tự động co giãn theo màn hình
• ❌ Trên mobile, video bị tràn ra ngoài hoặc quá nhỏ
• ❌ Tỷ lệ khung hình không chuẩn, video bị méo
• ❌ Layout trang bị vỡ khi xem trên các thiết bị khác nhau

Ví dụ code iframe mặc định của WordPress:

<p><iframe title="Lịch sử phát triển của WordPress (4 phút)" width="1020" height="765" src="https://www.youtube.com/embed/pIR2N_7WzL4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p>

Giải Pháp: Làm Video Responsive 100% Tự Động

Dưới đây là cách hoàn toàn tự động để video của bạn responsive, sau khi áp dụng code xong bạn chỉ cần dán link youtube và tận hưởng thành quả mà không phải chỉnh sửa gì thêm để video responsive.

Bước 1: Thêm CSS

Copy đoạn CSS ở Cách 1 vào CSS Tùy chỉnh.

/* Container responsive cho video YouTube */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 20px auto;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px; /* Bo góc đẹp hơn */
}

/* Tùy chỉnh thêm cho video trong bài viết */
.entry-content .video-container {
    margin: 30px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Bước 2: Thêm PHP Code vào functions.php

Truy cập: Giao diện → Trình chỉnh sửa tệp tin theme (hoặc Appearance → Theme File Editor)

Chọn file functions.php và thêm đoạn code sau vào cuối file:

/**
 * Tự động wrap iframe YouTube bằng container responsive
 * Áp dụng cho tất cả video YouTube trong nội dung bài viết
 */
function auto_responsive_youtube_iframe($content) {
    // Tìm tất cả iframe YouTube
    $pattern = '/<p>\s*<iframe(.*?)src=[\'"](.*?youtube\.com\/embed\/[^\'"]+)[\'"]([^>]*)><\/iframe>\s*<\/p>/i';
    
    // Thay thế bằng container responsive
    $replacement = '<div class="video-container"><iframe$1src="$2"$3 allowfullscreen></iframe></div>';
    
    $content = preg_replace($pattern, $replacement, $content);
    
    // Xử lý thêm trường hợp iframe không có thẻ p bao quanh
    $pattern2 = '/<iframe(.*?)src=[\'"](.*?youtube\.com\/embed\/[^\'"]+)[\'"]([^>]*)><\/iframe>/i';
    $replacement2 = '<div class="video-container"><iframe$1src="$2"$3 allowfullscreen></iframe></div>';
    
    $content = preg_replace($pattern2, $replacement2, $content);
    
    return $content;
}
add_filter('the_content', 'auto_responsive_youtube_iframe', 99);

/**
 * Loại bỏ width và height cố định khỏi iframe YouTube
 */
function remove_youtube_iframe_dimensions($content) {
    // Xóa thuộc tính width và height
    $content = preg_replace('/<iframe([^>]*?)width=["\']\d+["\']([^>]*?)>/i', '<iframe$1$2>', $content);
    $content = preg_replace('/<iframe([^>]*?)height=["\']\d+["\']([^>]*?)>/i', '<iframe$1$2>', $content);
    
    return $content;
}
add_filter('the_content', 'remove_youtube_iframe_dimensions', 98);

Giải Thích Code

1. auto_responsive_youtube_iframe: Tự động tìm tất cả iframe YouTube và wrap chúng bằng <div class="video-container">
2. remove_youtube_iframe_dimensions: Xóa bỏ thuộc tính width và height cố định để CSS có thể kiểm soát kích thước
3. Priority 98, 99: Đảm bảo chạy sau các filter khác của WordPress

Bước 3: Lưu File

Nhấn Cập nhật tập tin (Update File).

✅ Hoàn tất! Giờ mỗi khi bạn dán link YouTube, video sẽ tự động responsive.

CSS Nâng Cao Cho Video Đẹp Hơn

Nếu muốn video có hiệu ứng đẹp hơn, thay thế CSS cũ bằng đoạn này:

/* Container responsive với hiệu ứng đẹp */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 30px auto;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .video-container {
        margin: 20px 0;
        border-radius: 8px;
    }
}

Kiểm Tra Kết Quả

Sau khi áp dụng, video YouTube của bạn sẽ:

✅ Tự động co giãn theo chiều rộng màn hình
✅ Giữ nguyên tỷ lệ 16:9 chuẩn
✅ Hiển thị đẹp trên mọi thiết bị (desktop, tablet, mobile)
✅ Không bị tràn layout hoặc bị méo
✅ Có hiệu ứng hover mượt mà (nếu dùng CSS nâng cao)

Ví dụ đầu ra:

Kết Luận

Với phương pháp trên, bạn có thể dễ dàng khắc phục vấn đề hiển thị video YouTube trên WordPress. Code trên tự động hóa bằng CSS + PHP vì tiện lợi và hiệu quả – chỉ cần setup một lần, sau đó mọi video YouTube sẽ tự động responsive.

Chúc bạn thành công! Nếu có bất kỳ thắc mắc nào, hãy để lại comment bên dưới nhé.