Hướng dẫn tạo Responsive cho Video nhúng từ Youtube

Ngày nay, việc sử dụng các dòng điện thoại thông minh cho nhu cầu giải trí và lướt web càng được dùng rộng rãi. Và việc thiết kế trang web sao cho thân thiện với từng thiết bị rất được coi trọng. Nó giờ đã được đưa vào là một trong số rất nhiều các yếu tố khác nữa để đánh giá, xếp hạng trang web.

Và bạn cũng muốn có một trang web thân thiện với các thiết bị di động thì việc tạo responsive cho video mà bạn nhúng vào bài viết là điều rất cần thiết.

Các bước tạo Responsive cho Video

Bước 1: Các bạn thêm đoạn CSS dưới đây vào trong file CSS của mình. Với WordPress thì bạn có thể chèn vào dưới cùng file style.css chẳng hạn. Còn với Blogger thì bạn chèn vào trên thẻ  nhé! Lưu ý, tùy vào tỉ lệ bạn muốn mà chọn đoạn thứ nhất hay thứ hai nhé!

Tỉ lệ 16:9

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

Tỉ lệ 4:3

.responsive-video {
    position: relative;
    padding-bottom: 75%;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Bước 2: Bước này sẽ được thực hiện khi bạn đăng bài viết nhé! Khi đăng bài viết, bạn hãy chuyển sang tab HTML và dán đoạn code sau đây và vị trí mà bạn muốn hiển thị video nhé!

<div class="responsive-video">
    Mã nhúng Iframe của Video
</div>

Ngoài ra

Đối với các bạn dùng WordPress thì việc này càng đơn giản hơn nữa. Trong lúc viết bài, các bạn chỉ cần tích vào vị trí muốn hiển thị Video, sau đó nhấn vào Thêm Media, tiếp tục click vào Chèn từ URL. Sau đó các nhập URL video vào khung và nhấn Chèo vào bài viết. Vậy là xong rồi đấy 🙂

Tổng kết

Trong bài viết này mình đã hướng dẫn các bạn cách chèn Responsive video vào bài viết 1 cách thủ công. Ngoài ra, bạn có thể dùng Script đối với Blogspot và cách trong phần Ngoài ra đối với Mã nguồn WordPress để nhanh hơn và hiệu quả hơn 🙂

Nếu có gì không hiểu hay thắc mắc hãy để lại comment nhé!

 

Chia sẻ bài viết:

Bài viết liên quan:

Đọc nhiều cùng chuyên mục:

Add Comment

3 Comments

  1. QuocHieu
    3 Bình luận
    08/08/2016
  2. Nam Ngô
    34 Bình luận
    28/08/2016
    • Mộc
      Admin
      28/08/2016