Tự động căn giữa hình ảnh và Responsive video cho WordPress 2020

Tự động căn giữa hình ảnh và Responsive video cho WordPress: Thêm hình ảnh và video vào nội dung bài viết sẽ giúp bài viết sinh động, trực quan hơn. Nhưng nếu các bài viết được xem trên các thiết bị có màn hình nhỏ, thì những video và những hình ảnh này có thể hỏng giao diện của website bạn. Do đó responsive cho video và căn giữa hình ảnh là một công việc cần thiết phải làm.

Tự động căn giữa hình ảnh và Responsive video cho WordPress

1] Tự động căn giữa hình ảnh cho wordpress

Để tự động căn giữa cho hình ảnh trong wordpress các bạn chỉ cần thêm một đoạn CSS ngắn vào là nó sẽ tự động căn giữa hình ảnh cho wordpress.

Các bạn có thể thêm đoạn css này vào trong tùy biến – CSS bổ sung trong theme bạn đang dùng rồi dán đoạn CSS bên dưới vào đấy.

.aligncenter{
	display: block;
  margin-left: auto;
  margin-right: auto;
}

2] Responsive video cho WordPress

Để tự động tạo responsive cho video, youtube bạn thêm trong wordpress các bạn chỉ cần thêm một đoạn CSS ngắn vào là nó sẽ tự động Responsive video cho WordPress.

Trong bài viết các bạn chuyển sang html để chèn video theo định dạng như bên dưới

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

Tương tụ như trên các bạn có thể thêm đoạn css này vào trong tùy biến – CSS bổ sung trong theme bạn đang dùng rồi dán đoạn CSS bên dưới vào đấ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%;
}

Xong bây giờ các bạn quay lại Blog để tận hưởng nhé.

Hy vọng với cách tự động căn giữa hình ảnh và Responsive video cho WordPress này. Chúc bạn thành công.