STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Hướng Dẫn Nhúng Một Clip Youtube vào Trang Web HTML

    Hướng dẫn cách nhúng video clip từ Youtube vào trang web HTML với các bước đơn giản bằng <iframe>.
    18/03/2015
    29/08/2020
    1 phút đọc
    Hướng Dẫn Nhúng Một Clip Youtube vào Trang Web HTML

    Bài viết giới thiệu về:

    • Thẻ <iframe> trong HTML.
    • Nhúng video clip từ Youtube vào web bằng thẻ <iframe>.

    Thẻ iframe trong HTML

    <iframe> là 1 thẻ chuẩn HTML giúp nhúng 1 trang web vào 1 trang web.

    Ví dụ:

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <iframe
          src="https://training.stdio.vn"
         width="90%"
         height="500"
         frameborder="1"
       ></iframe>
     </body>
    </html>

    Các thuộc tính của <iframe> bao gồm:

    • src: đường dẫn đến trang web cần nhúng.
    • width: độ rộng iframe (px, %).
    • height: độ cao iframe (px, %).
    • frameborder: độ rộng của viền.

    <iframe> là 1 thẻ chuẩn HTML giúp nhúng 1 trang web vào 1 trang web.

    Hiện thực

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

    • Đến trang Youtube chứa đoạn clip cần nhúng, ví dụ: https://www.youtube.com/watch?v=jNQXAC9IVRw
    • Lấy tham số ở cuối liên kết: jNQXAC9IVRw
    • Thay tham số vào mã iframe như code mẫu bên dưới.
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Sao chép mã trên vào vị trí cần nhúng clip:

    <!DOCTYPE html>
    <html>
      <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html>

    Tuỳ chỉnh kích thước cho clip

    Khi nhúng 1 clip vào trang web mới, cần điều chỉnh lại kích thước widthheight.

    Ví dụ:

    <iframe width="1280" height="720" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    

    Thuộc tính allowfullscreen

    Sự tồn tại của allowfullscreen tương ứng với sự tồn tại của nút trình chiếu toàn màn hình trên clip.

     

    0 Bình luận
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Đề xuất

    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...

    Khám phá

    Dynamic Web Application với Eclipse Helios và Tomcat Server
    Hướng dẫn tạo ứng dụng web bằng IDE Eclipse Helios và Apache Tomcat Web ...
    09/09/2017
    SPA - Single Page Application Là Gì?
    Bài viết giới thiệu về SPA - Single Page Application, sự so sánh giữa mô ...
    HTML - Phần 0: Trang Web Đầu Tiên
    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    Lược Sử HTML
    Quá trình hình thành và phát triển của HTML.
    Sử Dụng CSS Image Sprites Tối Ưu Tải Trang
    Tối ưu quá trình load một trang web với CSS-Sprite. Các icon, hình ảnh ...
    29/05/2014
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    Học SEO Trong 1 Ngày - Phần 4 (Hết)
    SEO nâng cao với cấu trúc web, các vấn đề về robots.txt, nofollow, liên ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020