Chèn Video Youtube Vào Website Wordpress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại

Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại

Chi tiết cách chèn video Youtube vào Website wordpress chuẩn Responsive cho máy tính, table và điện thoại. Video chuẩn theo tỉ lệ Youtube 16:9 hiển thị đẹp trên website, thân thiện với người dùng, giảm tỷ lệ thoát trang.

Vấn đề khi chèn video Youtube lên website wordpress

Khi chèn video Youtube lên website wordpress, chúng ta thường gặp vấn đề là hiển thị của Video không đẹp. Trên máy tính PC, Laptop thì không đầy đủ tỷ lệ; Trên tablet, điện thoại thì hiển thị theo chiều dọc không đẹp và thân thiện với người dùng như hình phía dưới.

Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại
Hiển thị khi chưa Responsive

Giải quyết vấn đề

Để giải quyết vấn đề trên là chèn CSS vào giao diện (Theme) và ở mỗi bài viết thì thao tác chèn thêm vào mã nhúng của video Youtube

Chèn CSS vào giao diện website wordpress

Việc này thực hiện 1 lần duy nhất theo các thao tác 4 bước gồm: Customize >> CSS bổ sung >> Paste đoạn CSS vào >> Xuất bản

Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC Laptop Tablet Điện Thoại
Thực hiện 4 bước để thêm CSS

Mã đoạn CSS

.video-container {

    overflow: hidden;

    position: relative;

    width:100%;

}

 

.video-container::after {

    padding-top: 56.25%;

    display: block;

    content: ”;

}

 

.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Chèn mã nhúng video Youtube vào website wordpress

Ở bước này thực hiện việc copy mã nhúng video Youtube sau đó thêm giữa đoạn này:

<div class=”video-container”> Mã nhúng video Youtube </div>

Sau đó, paste cả đoạn này vào mục văn bản của bài viết trên website là thành công.

Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại
Lấy mã nhúng video từ Youtube
Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại
Chèn đoạn mã vào bài viết.

 

Kết quả

Kết quả hiện thị trên Máy tính và điện thoại như hình phía dưới. Rất đẹp, gọn gàng và thân thiện với người dùng.

Chèn Video Youtube Vào Website WordPress Chuẩn Responsive Cho Máy Tính PC, Laptop, Tablet, Điện Thoại
Kết quả hiển thị Responsive hoàn chỉnh.

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *