Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
17 Ví Dụ Về HTML5 Video Cho Website

17 Ví Dụ Về HTML5 Video Cho Website


Ngày 30 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các ví dụ về video HTML5 trong quá trình thiết kế và phát triển web nhé!

Các Ví Dụ Về Video HTML Cho Website

Nếu bạn muốn tìm hiểu video HTML5 là gì và các thuộc tính cơ bản của nó thì có thể tham khảo đường dẫn bên dưới nhé!

Video HTML5

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Tạo Nhúng Video Vào Bootstrap 4 Modal

Video Moadl Bootstrap4

Dự án này sẽ giúp bạn có thể nhúng các video Youtube và Vimeo vào Modal Ở Trong Bootstrap.

See the Pen Play YouTube or Vimeo Video in Modal - Bootstrap 4 by Jacob Lett (@JacobLett) on CodePen.

Nguồn

Chèn Video HTML5 Bằng Object-fit CSS

Chèn Video HTML5 Bằng Object-fit CSS

Đây là cách tạo video HTML5 cho website bằng việc sử dụng object-fit trong CSS.

See the Pen Daily Pen #80 by Dylan Macnab (@DylanMacnab) on CodePen.

Nguồn

Sử Dụng Video Trong HTML5

Sử Dụng Video Trong HTML5

Đây là cách tạo video HTML5 cho website bằng việc sử dụng object-fit trong CSS.

See the Pen HTML5 Video by Adam (@doddsy105) on CodePen.

Nguồn

Chèn HTML5 Video Bằng Thư Viện Video.js

Chèn HTML5 Video Bằng Thư Viện Video.js

Dự án này sẽ giúp bạn có thể chèn HTML5 Video vào trang web thông qua thư viện video.js.

See the Pen Video.js Default Skin by Steve Heffernan (@heff) on CodePen.

Nguồn

Hiệu Ứng Hover Cho HTML5 Video

Hover HTML5 Video

Video sẽ tự động được play khi người dùng hover vào nó (Chỉ sử dụng cho màn hình desktop thôi nhé).

See the Pen HTML5 Video Play on Hover by Captain Anonymous (@anon) on CodePen.

Nguồn

Cách Tạo Video Slider Bằng Slick.js

Video Slider Bằng Slick.js

Đây là dự án về cách thêm youtube, vimeo và HTML5 video vào trong slider.

See the Pen Slick Slider with auto play YouTube, Vimeo and HTML5 video by digistate (@digistate) on CodePen.

Nguồn

Cách Tạo HTML Video Trong SVG

HTML Video Trong SVG

Đây là hiệu ứng chèn video vào SVG bằng CSS và Javascript.

See the Pen SVG Text Mask w/ Video Fill by Dudley Storey (@dudleystorey) on CodePen.

Nguồn

Cách Nhúng Youtube Video Bằng PrettyEmbed.js

Nhúng Youtube Video Bằng PrettyEmbed.js

Cách nhúng video youtube vào website bằng thư viện PrettyEmbed.js.

See the Pen PrettyEmbed.js Demo by Mike Zarandona (@mike-zarandona) on CodePen.

Nguồn

Cách Tạo Video Player HTML5

Video Player HTML5

Thiết kế player video bằng thư viện Plyr Javascript.

See the Pen Plyr Demo by Sam Potts (@sampotts) on CodePen.

Nguồn

Tạo Hiệu Ứng Lightbox Cho Video HTML5

Lightbox Cho Video HTML5

Tạo hiệu ứng lightbox cho video bằng CSS và Javascript.

See the Pen HTML 5 Video playing in a lightbox by David LeDuc (@davidleduc) on CodePen.

Nguồn

Thiết Kế Play Button Video

Play Button Video

Cách chèn Youtube Video vào Modal trong website.

See the Pen Pulsing Play Button by Jared Ringold (@jaredringold) on CodePen.

Nguồn

Thiết Kế Video Card

Video Card

Cách tạo video card bằng HTML CSS và Javascript.

See the Pen Youtube card by Quentin Veron (@VeronQ) on CodePen.

Nguồn

Thiết Kế Responsive HTML Video Background

Responsive HTML Video Background

Thiết kế video background hiển thị trên nhiều loại màn hình thiết bị khác nhau.

See the Pen Responsive "background-size: contain" Video by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Video Button Animation CSS

Video Button Animation CSS

Thiết kế video background hiển thị trên nhiều loại màn hình thiết bị khác nhau.

See the Pen Video button animation - Only CSS by Milan Raring (@milanraring) on CodePen.

Nguồn

Thiết Kế Video Header CSS

Video Header CSS

Thiết kế video HTML5 cho hero header trong website.

See the Pen Expanding Video Hero by Joe Watkins (@joe-watkins) on CodePen.

Nguồn

Thiết Kế Video Gallery

Video Gallery

Trong phần này chúng ta sẽ tìm hiểu cách tạo Video Gallery trong website nhé!

See the Pen Video Gallery, Hover Effects, Lightbox by Bobby Korec (@bobbykorec) on CodePen.

Nguồn

Thiết Kế Youtube Video Grid CSS Javascript

Youtube Video Grid CSS Javascript

Trong phần này chúng ta sẽ tìm hiểu cách tạo Youtube Video Grid trong website nhé!

See the Pen Youtube videos by Moncho Varela (@nakome) on CodePen.

Nguồn

Nếu bạn muốn tham khảo các ví dụ về video background ở đường dẫn bên dưới nhé!

Video background CSS

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ video hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!