Cách đáp ứng wordpress

Khi bạn có video youtube muốn nhúng vào WordPress thì theo mình thì 90% mọi người đều nhúng sai cách chỉ đẹp và dùng tốt trên giao diện desktop còn giao diện mobile thì không ổn cho lắm

Khi bạn nhúng video vào bài viết giá trị bài viết của bạn sẽ cao hơn rất nhiều, giảm tỷ lệ thoát rất tốt. Tuy nhiên để video thực thi hiệu quả thì bạn phải biết cách nhúng video vào trang web của bạn theo một cách chính xác về tiêu chuẩn đáp ứng

Mình hôm nay sẽ chia sẻ một kỹ thuật nhúng video youtube chuẩn giao diện responsive từ a đến z, những bạn nào chưa biết nhúng video youtube thì mình sẽ hướng dẫn luôn, còn những bạn nào đã nhúng nhưng sai thì cần chỉnh sửa lại

Mọi người nhúng sai giao điện thoại desktop thì vẫn rất là ngon, nhưng sang giao diện điện thoại thì rất chán

Cách đáp ứng wordpress
nhúng video mobile chưa được tối ưu, 2 khoảng đen để ghê video thì bé tí.
Cách đáp ứng wordpress
giao diện mobile đã được tối ưu
Cách đáp ứng wordpress
giao diện máy tính để bàn lúc chưa tối ưu vẫn còn khá ngon
Cách đáp ứng wordpress
video nhúng đã được

Nếu bạn theo cách tối ưu của mình thì sẽ ngon tuyệt toàn bộ giao diện máy tính để bàn và lần di động luôn

Responsive video là gì

Responsive là phong cách thiết kế trang web làm sao cho phù hợp trên tất cả các thiết bị, mọi mức độ phân giải màn hình từ điện thoại đến máy tính để bàn

Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web Responsive, giờ vẫn còn một số website mình gọi là thời cổ đại giao diện Responsive cũng không

Responsive video thì cũng như vậy

Cách đáp ứng wordpress
hướng dẫn nhúng video youtube chuẩn trang web đáp ứng WordPress

Hướng dẫn cách nhúng video chuẩn

bạn cần đưa đoạn này vào kiểu tệp. css hoặc tùy chỉnh giao diện css

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

Khi bạn đã chuyển đoạn hàm css vào rồi thì nhớ xóa cache trình duyệt nhé

Xong bạn lên kênh youtube của bạn

bạn chuột phải vào video nhúng video

Cách đáp ứng wordpress
get đoạn mã nhúng video trên youtube

Đây là đoạn mã nhúng ví dụ của mình, bình thường các bạn chỉnh nhúng phát vào bài viết là xong nhưng như thế thì hoàn toàn sai, trừ khi bạn có sử dụng plugin hỗ trợ nhúng video hay sử dụng các trình tạo trang thì họ sẽ hỗ trợ

Bây giờ bạn kết hợp, đoạn mã này vào nhé mỗi lần bạn nhúng video youtube thì làm theo cách này

Đoạn code bạn nhúng video cho bạn chỗ này

Mình sẽ ví dụ như thế này nhé

Khi nào bạn đăng bất kỳ video youtube nào vào trang web của bạn thì như thế này

Cách đáp ứng wordpress
giao diện di động đã được tối ưu hóa

Nếu bạn đã nhúng sai thì chịu khó sửa lại từng bài một nhé

Nếu trong trường hợp bạn đã nhúng video nhiều bài viết quá hay bạn không thêm tự thêm thẻ div vào thì bạn sử dụng đoạn mã này để nó tự thêm, mình khuyến cáo là hãy lên thêm bằng tay thì tốc độ sẽ tốt hơn, nhưng

Nó có tác động đến tốc độ tải trang web chỉ một chút thôi nói ra là rất ít

You select this code code into file functions. php

add_filter('the_content', function($content) {
	return str_replace(array(""), array('
"), $content); });

Khi bạn chọn đoạn mã này thì nhớ xóa toàn bộ cache đi nhé

Mục đích đoạn mã là tự động bổ sung thẻ

cho những video nhúng của bạn
Tóm tắt.

Như vậy là xong rồi, kỹ thuật này mình nghĩ sẽ giúp trang web của bạn chuẩn hơn, tối ưu hóa trải nghiệm người dùng

Chúc bạn thành công

Đoạn code bạn nhúng video cho bạn chỗ này

Hãy cố gắng nhúng thủ công thì tốc độ sẽ tốt hơn được một chút, nó cũng không đáng kể lắm nhưng một chút đối với mình cũng khá ổn

Còn một số cách sửa lỗi khác như bạn sử dụng plugin Hỗ trợ nhúng video youtube hay một số builder Hỗ trợ nhúng video có hỗ trợ nhúng youtube chuẩn responsive, tuy nhiên theo mình phương pháp mình đang chia sẻ với bạn đây là cách tốt nhất