Fix giao diện Video Youtube chuẩn tỉ lệ đa thiết bị khi nhúng vào website

Có một điều khá là khó chịu nếu như bạn nhúng (embed) video từ Youtybe bằng code Embed thì sẽ ít nhiều gặp trường hợp là nó không hiển thị full, hoặc trên mobile nó bị tràng. Hướng dẫn này mình sẽ chỉ bạn cách fix lỗi này bằng CSS nhé!

Cách nhúng video từ Youtube vào website

Để nhúng thì bạn vào video -> chia sẻ -> code -> copy code embed. Thường nó sẽ có dạng như này:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dIP5qGaD1fk?si=cqtAVCFCWdIYOUOH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Bạn có thể thay đổi id video bạn cần nhúng thành video mình cần nha, như bảng nhúng trên thì ID video là” dIP5qGaD1fk?si=cqtAVCFCWdIYOUOH

Sau đó mở trình soạn thảo, vào mục sửa HTML (đối với Block editor – (Gutenberge) ) và Text (đối với Classic Editor) và dán code vào

Cách sửa hiển thị đúng tỉ lệ video trên các thiết bị

Vẫn như thường lệ, bạn dán đoạn này vào file style.css của theme đang sử dụng.

iframe // đoạn này dùng để chọn iframe
{
    width: -webkit-fill-available!important; //đoạn này dùng để set hiển thị full 100%
    height: auto !important;
    aspect-ratio: 16 / 9 !important; //đoạn này dùng để fix tỉ lệ video
    border-radius: 12px; //đoạn này mình bo thêm các góc cho đẹp
}

Kết quả nó sẽ full mà hình và hiển thị đúng trên tất cả các thiết bị.

Dán đoạn này vào file style.css nếu bạn muốn nhanh gọn lẹ nhé!

iframe { width: -webkit-fill-available!important; 100% height: auto !important; aspect-ratio: 16 / 9 !important; border-radius: 12px; }

Nếu bạn gặp khó khăn trong chỉnh sửa hoặc muốn phát triển tính năng riêng cho website thì có thể tham khảo dịch vụ bảo trì - phát triển tính năng website wordpress tại TNDigi nhé!

Mình tự học - tìm hiểu - nghiên cứu và làm việc với WordPress được khoảng thời gian nhất định nên lên serial chia sẻ những gì mà mình từng gặp qua. Sẽ có nhiều thiếu sót nên nếu như có chổ nào chưa đúng hay chưa hoạt động được bạn contact với mình để hoàn thiện hơn.

Ghi chú quan trọng:
Cách tuỳ biến không cần can thiệp vào CODE mà sử dụng hook (nếu chưa có trong hướng dẫn) sẽ được mình sớm cập nhật!

Kênh Zalo hỗ trợ miễn phí. Chúc bạn áp dụng thành công!