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

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.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

Welcome to f4vnn.com: tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ và chúng tôi sẽ xóa bài viết ngay lập tức. Liên lạc với Admin qua mail: hoangvansy90@gmail.com

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!

BLOG TIPS F4VNN

Là người yêu thích công nghệ và công việc cũng làm làm trong ngành công nghệ, nên mình muốn chia sẻ những gì mà mình biết và từng tìm hiểu qua muốn chia sẻ cho mọi người cùng sở thích.

  Bài viết cùng chuyên mục

  • Cách thay đổi Gravatar mặc định trên WordPress
  • Hiển thị thông tin tác giả không cần plugin cho WordPress
  • Chống copy hình ảnh không dùng Plugin cho WordPress
  • Hướng dẫn cách thêm ảnh trước và ảnh sau cho WordPress
  • Bài viết liên quan kèm ảnh không cần Plugin cho WordPress