Hướng dẫn tạo Responsive Video với CSS cho Blogger

Hướng dẫn tạo Responsive Video với CSS cho Blogger

Nếu bạn muốn tạo một blog có chứa video, thì bài viết dưới đây sẽ hướng dẫn bạn tạo cho video có khả năng responsive cho blogger:
Trước tiên bạn cần đăng nhập vào Blogger > edit Template. Sau đó chèn đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>

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

Sau đó lưu template lại. Khi tạo bài viết mà bạn muốn chèn Video vào thì bạn thêm đoạn mã sau vào bài viết:

<div class="video">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/4L0R4A3oLOg" frameborder="0" allowfullscreen></iframe>
</div>

Thay dòng màu đỏ bằng liên kết tới video của bạn

See the Pen Make responsive video with css by ducnguyen (@ducrat) on CodePen.