Nếu bạn muốn trang web của mình Responsive Video Youtube, hãy làm theo cách sau đây, đảm bảo video của bạn sẽ responsive theo đúng kích thước màn hình nhé

,

Want create site? Find Free WordPress Themes and plugins.

Xin chào các bạn, hiện nay nhu cầu xem website trên di động cực kì cao, vì thế chúng ta cần phải làm mọi thứ để có thể hiển thị đúng và chuẩn trên các màn hình nhỏ, trong các bài viết thường chúng ta có thêm video Youtube nhưng chúng lại không tự động co lại khi trên màn hình nhỏ, làm sao đây ?

Như các bạn biết đấy, thiết kế giao diện responsive hiện nay gần như là bắt buộc với tất cả các giao diện, một là Google coi đó là tín hiệu xếp hạng, hai là chúng ta giúp những người dùng di động trải nghiệm website theo cách tốt hơn, bài viết sau đây tôi xin hướng dẫn các bạn cách chèn Responsive Video Youtube vào giao diện responsive !

Bước 1: Thêm vào CSS

Để Responsive Video Youtube ta cần phải thêm mã CSS sau vào trong file Style.css trong gói giao diện WordPress, với các mã nguồn khác các bạn cứ thêm vào file CSS tương ứng:

.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ước 2: Nhúng mã Video

Các bạn cần phải lấy mã nhúng của Youtube, như trong hình:

Lấy mã nhúng của các video trên Youtube

Lấy mã nhúng của các video trên Youtube

Tiếp theo, các bạn đã có mã đó, các bạn lưu ý là nên bỏ cái khai báo Width và Height đi, để cho Iframe có thể co dãn được !

Bạn sẽ được một mã như thế này:

<iframe src="https://www.youtube.com/embed/7DrO70nz-Ko" frameborder="0" allowfullscreen>
</iframe>

Bước 3: Nhúng vào bài đăng

Bạn sẽ nhúng theo mã như sau, nhớ chuyển sang tab “Văn bản” trên WordPress hoặc “HTML” trên Blogger nhé:

<div class="video-container">Mã nhúng bên trên</div>

Và chúng ta đã được một cái video trong bài viết biết tự co dãn theo kích thước màn hình rồi !

Các plugin WordPress giúp nhúng video Youtube

Các plugin sau đây sẽ giúp bạn nhanh chóng có một cái video Youtube biết co dãn theo trang 😀

  1. Advanced Responsive Video Embedder
  2. Responsive Video Shortcodes
  3. WP Canvas – Responsive Videos

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

Did you find apk for android? You can find new Free Android Games and apps.

Tôi là Jam, thâm niên 7 năm thiết kế website và làm seo, nếu các bạn thấy bài viết hay thì hãy chia sẻ cho những người khác cùng tham khảo, còn nếu muốn thiết kế website hoặc sửa web hay đặt một plugin có chức năng đặc biệt, hãy liên hệ ngay tới Jam ( thông tin ở chân trang )

Bài viết liên quan

Trả lời

Thư điện tử 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 *

Lưu ý: Không đăng thông tin cá nhân của bạn như email hay số điện thoại để không bị quấy rầy, tham khảo thêm quy định khi comment !