1. An Nguyen

    An Nguyen bụi Ban quản trị

    12/3/19
    #1
    Mặc định mã nhúng youtube không hỗ trợ responsive, nghĩa là kích thước video (width và height) không tự thay đổi theo kích cỡ các thiết bị khác nhau.



    Trong bài viết này hướng dẫn cách thiết lập nhúng video youtube vào website, để có tỷ lệ phù hợp với mọi thiết bị (thiết kế Responsive) chỉ với thay đổi HTML & CSS

    Bước 1: Lấy mã nhúng Youtube
    Lấy mã nhúng iframe từ video trên Youtube, ví dụ
    HTML:
    1. <iframe width="772" height="459" src="https://www.youtube.com/embed/QRK8MDVgqd8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    Bước 2: Chèn mã nhúng
    Tạo thẻ div container bao quanh và đặt đoạn mã nhúng video bên trên vào, thêm cho nó 1 class, ví dụ:
    HTML:
    1. <div class="video-container"><iframe width="772" height="459" src="https://www.youtube.com/embed/QRK8MDVgqd8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    Bước 3: Thêm CSS
    Mã (CSS):
    1. .video-container {
    2.     position:relative;
    3.     padding-bottom:56.25%;
    4.     padding-top:30px;
    5.     height:0;
    6.     overflow:hidden;
    7. }
    8.  
    9. .video-container iframe, .video-container object, .video-container embed {
    10.     position:absolute;
    11.     top:0;
    12.     left:0;
    13.     width:100%;
    14.     height:100%;
    15. }
    Bây giờ video sẽ được thu phóng khi kích thước thiết bị (khung nhìn) thay đổi, quy tắc padding-bottom 56.25% là tỉ lệ 16:9 của video (9/16 = 0.5625)
     
    Sửa lần cuối: 12/3/19
    Đang tải...
Đã lưu nháp Draft deleted
Đang tải...