No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
No Result
View All Result
Home WordPress Hướng dẫn

Chèn Youtube vào website tự động responsive

in Hướng dẫn
0
Chèn Youtube vào website tự động responsive
239
SHARES
1.3k
VIEWS
Share on FacebookShare on Twitter

Để website thêm sinh động, việc chèn Youtube vào bài viết là một lựa chọn rất tốt. Youtube hỗ trợ tính năng chia sẻ và chèn clip vào website. Nếu như website của bạn có những video clip hấp dẫn thì khách hàng sẽ rất hứng thú.

Chỉ có một vấn đề khi nhúng clip Youtube vào website thì chiều rộng và chiều cao của clip là cố định. Ví dụ như hình ảnh phía dưới, clip khi nhúng có chiều rộng là 560px, chiều cao là 315px.

Hướng dẫn chèn clip Youtube tự động responsive

Bước 1: Lấy đoạn code nhúng của video clip trên Youtube mà bạn muốn chia sẻ. Nhấn vào Chia sẻ  -> chọn Nhúng -> copy đoạn code Youtube cung cấp.

Bước 2: Vào bảng điều khiển wp-admin của WordPress, cài đặt plugin để bổ sung CSS. Mình thường sử dụng plugin Simple CSS nhỏ, gọn và đơn giản. Bạn có thể chọn plugin khác tùy ý. Mình không khuyến khích việc chèn CSS trực tiếp vào theme. Bạn có thể tìm hiểu thêm lý do tại đây.

Bước 3: Tại wp-admin của WordPress, vào Giao diện -> Simple CSS -> chèn đoạn CSS dưới đây vào:

/* Make div class="youtube-responsive" */
.youtube-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.youtube-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

Bước 4: Vào vị trí mà bạn muốn nhúng đoạn video clip, trên menu soạn thảo văn bản, chọn Insert -> Media -> chọn tab Embed -> gõ đoạn code HTML như sau:

<div class="youtube-responsive"> bỏ đoạn code Youtube vào đây </div>

Bước 5: Tận hưởng thành quả. Phía dưới là ví dụ minh họa mình thực hiện trên website Du học Glolink.

Cảm ơn bạn đã đọc bài viết Chèn Youtube vào website tự động responsive của No Code Building. Nếu bạn cần hướng dẫn hoặc tư vấn nội dung liên quan đến website thì cứ liên hệ mình. Thân chào bạn.

Previous Post

Coder có cần giỏi tiếng Anh?

Next Post

Backlink là gì?

Related Posts

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor
Hướng dẫn

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor

by TRUNG NO CODE
3 Tháng Tám, 2021
Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?
Công nghệ

Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?

by TRUNG NO CODE
22 Tháng Bảy, 2021
Đây là lý do mình xóa AMP trên website của mình.
Công nghệ

Đây là lý do mình xóa AMP trên website của mình.

by TRUNG NO CODE
15 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
Hướng dẫn

Thêm chữ sau Tổng tiền giỏ hàng và Tổng tiền đơn hàng (Add text after Total Cart in Cart page and Total Order in Checkout page in Woocommerce)

by TRUNG NO CODE
6 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
Hướng dẫn

Change PROCEED TO CHECKOUT text in Woocommerce Cart page

by TRUNG NO CODE
6 Tháng Bảy, 2021
Next Post
Backlink là gì

Backlink là gì?

Currently Playing

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

00:43:24

Recommended

Coder có cần giỏi tiếng Anh?

5 Tháng Ba, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)

Chuyển hướng người dùng sau khi đăng ký (Redirect Users After WooCommerce Registration)

4 Tháng Bảy, 2021

Chuyên mục

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Don't miss it

Xem trọn bộ phim Hán Sở tranh hùng  2013
Giải trí

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music
Âm nhạc

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021
Mua vải bố canvas TP.HCM ở đâu?
Kinh doanh

Mua vải bố canvas TP.HCM ở đâu?

9 Tháng Mười Hai, 2021
Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình
Tiền điện tử

Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình

27 Tháng Chín, 2021
Mô hình Stock to Flow S2F của PlanB
Tiền điện tử

Mô hình Stock to Flow S2F của PlanB

27 Tháng Chín, 2021
Xem phim The Big Short 2015 – Phim hay về thị trường tài chính
Giải trí

Xem phim The Big Short 2015 – Phim hay về thị trường tài chính

9 Tháng Mười Một, 2021

Thẻ

bàn bida hollywood 2021 chỉnh font mặc định trong corel code auto choose variable product code để khách gửi email bằng tài khoản gmail hướng dẫn cách xem kênh youtube nào nhiều sub nhất hướng dẫn lắp kim đồng hồ treo tường in nón bảo hiểm giá rẻ in nón bảo hiểm giá rẻ tphcm in nón bảo hiểm giá sỉ khuyến mãi kênh youtube nhiều sub nhất thế giới kênh youtube nhiều sub nhất việt nam mua elementor pro namesilo nocodebuilding nón bảo hiểm quà tặng qts1 quà tặng 90 năm thành lập đoàn quà tặng kỷ niệm 90 năm đoàn thanh niên quà tặng số 1 raya và rồng thần cuối cùng full sản xuất nón bảo hiểm chất lượng sản xuất đồng hồ treo tường theo yêu cầu thiết kế website thiết kế website không cần code thiết kế website wordpress top 100 phim hoạt hình hay nhất mọi thời đại tra cứu thông tin bầu cử quận 12 tự động chọn biến thể vultr woocommerce xưởng sản xuất nón bảo hiểm xưởng sản xuất nón bảo hiểm giá rẻ đặt in nón bảo hiểm số lượng lớn đặt làm đồng hồ treo tường theo yêu cầu đặt nón bảo hiểm quà tặng đặt nón bảo hiểm theo yêu cầu đồng hồ công cộng đồng hồ công cộng uy tín đồng hồ treo tường 1m đồng hồ treo tường cỡ lớn đồng hồ treo tường giá rẻ đồng hồ treo tường hội trường đồng hồ treo tường in logo giá rẻ đồng hồ treo tường trước cổng trường
No Code Building

Giải pháp Marketing hiệu quả

Categories

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Recent News

Xem trọn bộ phim Hán Sở tranh hùng  2013

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021

© 2021 No Code Building - Giải pháp Marketing hiệu quả

No Result
View All Result
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm

© 2021 No Code Building - Giải pháp Marketing hiệu quả

Gọi điện thoại
0989 333 069