Hướng dẫn đăng video Youtube Responsive

dang video responsive

hướng dẫn đăng video youtube responsive

Hello, anh em! Trong bài viết lần này Ryan sẽ hướng dẫn cho mọi người cách để đăng video từ youtube lên website tương thích với mọi thiết bị. 


Tức video sẽ luôn hiển thị tốt ở mọi kích thước màn hình không gặp phải tình trạng tràn ra khỏi khung chứa nội dung nếu màn hình hiển thị quá nhỏ, như hình bên dưới này.

video bị tràn khỏi khung nội dung

Bên trên là tình trạng mà mọi người sẽ gặp phải khi chỉ thực hiện chèn video theo cách thông thường, như sử dụng công cụ sẵn có của Blogger trong phần soạn thảo: 

hướng dẫn đăng video

đăng video youtube bằng công cụ blogger cung cấp

Hay dùng cách chèn video bằng mã Iframe mà youtube cung cấp:

chèn video youtube bằng iframe vào web

Ok! Bạn thấy đó việc nhúng video bằng những cách như vậy sẽ có nhiều hạn chế, vì kích thước video đã bị cố định về chiều rộng và chiều cao. 

Do đó, video của chúng ta có thể chạy tốt khi khách hàng xem trên máy tính, nhưng khi xem trên các thiết bị có kích thước màn hình nhỏ như điện thoại thì video sẽ bị tràn khỏi phần nội dung chính làm vỡ bố cục.

Để không bị vậy, chúng ta cần thêm vào thuộc tính responsive cho mỗi video được chèn vào web. Vậy thuộc tính Responsive là gì? Tại sao nó lại có tác dụng? 

Responsive là gì?

Công nghệ responsive hiểu một cách đơn giản là sự tương thích hay sự thích ứng, được tạo ra nhằm mục đích giúp các nội dung trên website có thể hiển thị tốt ở mọi dạng kích thước màn hình khác nhau.

video responsive

Tại sao nó lại có tác dụng?

Nhờ việc chuyển đổi kích thước hiển thị chiều rộng và chiều cao của nội dung bất kỳ sang dạng phần trăm hay vì là 1 con số cụ thể. Thuộc tính Responsive cho phép đối tượng tự động được kéo dãn tự nhiên theo sự thay đổi của kích thước màn hình mà không bị biến dạng.

Làm thế nào để nhúng video Responsive vào website?

Để video được nhúng vào web có thể chạy tốt cho nhiều thiết bị khác nhau, chúng ta có 2 cách: 
  • Cách 1: Sử dụng công cụ tạo video Responsive sau đó lấy mã và chèn vào website.
  • Cách 2: Sử dụng mã code để biến video Youtube thành video Responsive.

Sử dụng công cụ Online để tạo video Responsive

Đây là cách làm đơn giản dành cho anh em biết ít về code, việc chúng ta cần làm là tìm video tạo mã và dán vào nơi muốn hiển thị là được. Anh em làm theo mình hướng dẫn nhé!

Bước 1: Đăng nhập vào website Embedresponsively.com

Bước 2: Đăng nhập vào Youtube, chọn video mà ta muốn chèn vào web sau đó copy đường dẫn của video đó

copy link video trên youtube

Bước 3: Dán đường liên kết vào mục Youtube Page URL

dán link vào ô tạo code trên embedresponsively

Bước 4: Nhấn vào nút "Embed" để tạo code

tạo code video responsive online

Bước 5: Copy toàn bộ đoạn code vừa được tạo ra

copy code responsive

Bước 6: Chuyển nội dung soạn thảo sang định dạng HTML và dán đoạn code vừa tạo vào nơi muốn hiển thị video.

dán code vào website

Bước 7: Nhấn vào nút Cập nhật để lưu lại thay đổi và quay trở lại website để tận hưởng thành quả thôi ^^

Sử dụng CSS để biến video Youtube thành video Responsive

Bước 1: Anh em đăng nhập vào Blogger đi đến mục "Chủ đề" chọn vào dấu "..." sau đó chọn tiếp vào "Chỉnh sửa HTML"

Bước 2: Giờ mọi người copy đoạn mã CSS bên dưới này:

.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Bước 3: Ta quay lại phần "Chỉnh sửa HTML", nhấn phím Ctrl + F và tìm kiếm đoạn code sau:

]]></b:skin

Bước 4: Giờ anh em Paste toàn bộ đoạn code mà ta vừa code ở bước 2 lên phía trên đoạn mã vừa tìm được và nhấn vào nút để lưu lại.

Bước 5: Để chèn hoặc nhúng video Youtube vào web anh em sử dụng đoạn code sau nhớ chuyển phần soạn thảo sang dạng HTML trước

<div class="video-container"> 
<iframe src="https://www.youtube.com/embed/ID video Youtube" frameborder="0" width="560" height="315"></iframe> 
</div>

Dán nó vào nơi anh em muốn hiển thị video nhớ thay ID video Youtube thành mã video mà anh em muốn chèn vào nhé! Cách để lấy ID video Youtube anh em xem bên dưới này.

Hướng dẫn lấy mã ID video trên youtube

Bước 1: Anh em đăng nhập vào Youtube

Bước 2: Chọn vào video mà anh em muốn

Bước 3: Nhìn lên thanh địa chỉ của trình duyệt web anh em sẽ thấy đường link video hiện tại có dạng như sau https://youtube.com/watch?v=[ID video], thì ID của video chính là đoạn mã nằm phía sau ".../watch?v="

xác định ID video youtube

Như hình trên thì ID video chính là đoạn grQ-w-8W-Kg, giờ ta chỉ việc copy đoạn mã này và dán vào thay thế phần code mà mình đã bôi đỏ là được. Chúc anh em thành công.

Tổng kết

Ok! Như vậy là chúng ta đã biết được cách làm thế nào để thêm video từ youtube vào website mà vẫn đảm bảo hiển thị tốt trên mọi kích thước màn hình. Mong những kiến thức mình chia sẻ có thể hữu ích với bạn.

Trong bài viết lần tới, Ryan sẽ hướng dẫn cho anh em cách thay đổi đường dẫn của 1 bài viết hoặc 1 trang đã xuất bản lên website, cùng chờ nhé! Còn giờ thì bái bai và hẹn gặp lại ~( ̄▽ ̄)~

Tài liệu tham khảo:
Embed video - Youtube

Đăng nhận xét

0 Nhận xét

» Không spam link lung tung, vì chúng ta là những con người văn minh ^^