Nội dung bài viết
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.
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:
Hay dùng cách chèn video bằng mã Iframe mà youtube cung cấp:
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.
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 đó
Bước 3: Dán đường liên kết vào mục Youtube Page URL
Bước 4: Nhấn vào nút "Embed" để tạo code
Bước 5: Copy toàn bộ đoạn code vừa được tạo ra
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.
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:skinBướ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>
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="
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
Add Image and video to your blog - Google Support
0 Nhận xét
» Không spam link lung tung, vì chúng ta là những con người văn minh ^^