Chèn và nhúng video youtube vào trong blogspot - 123itvn.com


Cộng đồng vui bựa status Tham gia đê
(Góc Paypal)
Tỷ giá tốt, độ trust cao và nhận tiền nhanh chóng! Liên hệ ngay để được trải nghiệm dịch vụ mua dollar paypal - thanh toán hộ paypal uy tín nhất Việt Nam hàng trăm năm qua nhé :))

Chèn và nhúng video youtube vào trong blogspot


Hướng dẫn các cách để chèn thành công 1 video youtube vào blogspot, wordpress và một số nền tảng khác.


Chèn và nhúng video youtube vào trong blogspot
Chèn và nhúng video youtube vào trong blogspot

Chèn trực tiếp bằng thanh công cụ soạn thảo trong blogspot


- Tạo bài đăng mới.
- Trên thanh công cụ, nhấn vào nút .
- Cửa sổ Thêm video xuất hiện, tại đây bạn có thể sử dụng tab Từ YoutubeVideo trên Youtube của tôi để chèn video vào blogspot.

Chèn và nhúng video youtube vào trong blogspot
Chèn trực tiếp video youtube

Chèn gián tiếp bằng mã nhúng HTML


Ngoài blogspot, cách làm này cũng có thể áp dụng với  hầu hết các ngôn ngữ và nền tảng khác như wordpress, ...

Lấy mã nhúng của video youtube


- Dưới trình xem video, chọn Chia sẻ / Nhúng.
- Copy đoạn mã nhúng do Youtube cung cấp.

Chèn và nhúng video youtube vào trong blogspot
Mã nhúng HTML của video trên youtube

Chèn mã nhúng vào blogspot


- Trên thanh menu, chọn chế để soạn thảo ở dạng HTML.

HTML blogspot

- Paste mã nhúng vào vị trí bạn muốn chèn video youtube.

Chèn và nhúng video youtube vào trong blogspot
Chèn mã nhúng video youtube vào blogspot ở dạng HTML

Demo



Tùy chỉnh kích thước video youtube trong website responsive (đáp ứng)


Với website responsive, giao diện sẽ tự động thay đổi để hiển thị tốt nhất trên nhiều màn hình khác nhau (smart phone, máy tính bảng, desktop, ...) Trong khi đó, video youtube được chèn lại luôn có kích thước cố định (thường là 560 x 315) . Nếu không tiến hành tùy chỉnh kích thước video cho phù hợp với từng màn hình thì giao diện website sẽ đi xuống đấy :))

Ví dụ : video có kích thước 560 x 315 trong khi màn hình là 320 x 600

Ví dụ về việc hiện thị không đồng bộ
video youtube bì thừa nội dung ra bên ngoài

Tùy chỉnh bằng CSS


Lưu ý
- Hãy chắc chắn là bạn am hiểu về CSS.
- Sao lưu blogspot trước khi thao tác.

Bước 1 : Tìm cặp thẻ <head></head> và chèn vào trong đó đoạn mã, đây là điều kiện để sử dụng tính năng responsive.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Bước 2 : Tìm đến khu vực CSS của website, sau đó copy - paste đoạn mã dưới đây vào phần cuối cùng trong CSS.
- Tỷ lệ video youtube mà mình sử dụng là 16:9, các bạn có thể thay đổi cho phù hợp.
- Nếu website của bạn đã sử dụng tính năng responsive thì chỉ cần copy dòng iframe, embed ... thôi nhé.

@media all and (min-width: 320px)
{
iframe, embed : {width:300px; height:168px;}
}
@media all and (min-width: 480px)
{
iframe, embed : {width:460px; height:258px;}
}
@media all and (min-width: 600px)
{
iframe, embed : {width:580px; height:326px;}
}
@media all and (min-width: 768px)
{
iframe, embed : {width:...px; height:...px;}
}
@media all and (min-width: 1024px)
{
iframe, embed : {width:...px; height:...px;}
}
@media all and (min-width: 1280px)
{
iframe, embed : {width:...px; height:...px;}
}

- Lưu template lại và kiểm tra nhé :)


Từ khóa tìm kiếm :

  • chèn video youtube vào blogspot
  • chèn video youtube vào website
  • chèn video youtube vào html
  • nhúng video youtube vào web
  • code chèn video vào html
  • mã nhúng youtube

Có thể bạn sẽ thích

Bình luận !