Trong hướng dẫn này, chúng tôi chỉ cho bạn cách đặt video làm nền chỉ bằng CSS và HTML.

Bạn đang xem : video hình nền css

Để sử dụng hình nền video, chúng tôi phải sử dụng HTML 5 & lt; video & gt; phần tử có vị trí tuyệt đối bên trong trình bao bọc vùng chứa.

Video ngày càng phổ biến trên các trang web ngày nay và là một cách tuyệt vời để tạo một trang web hiện đại. Chỉ với một chút CSS, bạn có thể thêm nền video vào trang web của mình chỉ trong vài phút. Tuy nhiên, lưu ý rằng kỹ thuật này chỉ hoạt động đối với các phần tử & lt; video & gt; . Điều này có nghĩa là video sẽ phải được lưu trữ ở đâu đó. Bạn cũng có thể sử dụng CSS để tạo nền video Youtube , nhưng đó không phải là nội dung của hướng dẫn này.

Tìm video nền

Nếu bạn chưa có video, cách dễ nhất để tìm video cho trang web của bạn là sử dụng thư viện kho video như Pixabay hoặc < span rel = "noopener nofollow" target = "_ blank"> Pexel .

Khi bạn tìm thấy cái mà mình muốn sử dụng, bạn sẽ phải tải xuống và tải nó lên máy chủ của mình (hoặc các dịch vụ CDN như Cloudinary ).

Sau khi tải lên, chúng tôi có URL của video và chúng tôi có thể sử dụng URL đó trong phần tử & lt; video & gt; của mình.

Thêm HTML cho video

Đối với video, chúng tôi sẽ sử dụng phần tử video HTML 5 . Nó cần ít nhất một tệp nguồn video và có thể được định cấu hình thông qua nhiều thuộc tính HTML.

Đối với ví dụ của chúng tôi, chúng tôi sẽ sử dụng cái này:

  

& lt; < / p> video

Playinginline

tự động phát

tắt tiếng

loop

người đăng

< p class = "dấu chấm câu mã thông báo attr-equals"> =

"

cake.jpg

"

& gt;


& lt;

nguồn

src

=

"

my-video-url.webm

"

loại

=

" < / p> video / webm

"

& gt;


Trình duyệt của bạn không hỗ trợ thẻ video.

& lt; /

video

& gt;

Sau này, chúng ta sẽ nói nhiều hơn về cấu hình video nền định dạng video .

Đặt video trong nền bằng CSS

Thông thường, trong CSS, chúng tôi đặt hình nền bằng cách sử dụng thuộc tính background hoặc thuộc tính background-image .

  

background

:

url

(

imgs / my-background-image.png

)

;


background-size

:

cover

;

Tuy nhiên, thuộc tính nền chỉ hoạt động với hình ảnh và màu sắc. Không phải với video.

Bây giờ chúng tôi có một phần tử video tiêu chuẩn, vậy làm cách nào để chuyển đổi phần tử đó thành nền? Chúng tôi sẽ sử dụng một thủ thuật nhỏ ở đây. Sử dụng CSS position: Absolute , chúng tôi sẽ mô phỏng một phần tử nền.

  

video

{


vị trí

:

tuyệt đối

;


< p class = "token property"> top

:

0

;


trái

:

0

;


}

Điều này sẽ đặt video của chúng tôi nằm ngoài luồng thông thường của tài liệu và liên quan đến yếu tố chúng tôi chọn bên trong thành phần chính của nó.

Vì vậy, đã đến lúc thêm vùng chứa video của chúng tôi! Chúng tôi sẽ sử dụng phần tử div làm vùng chứa cho video của mình. Chúng tôi gọi nó là video-wrapper .

  

& lt; < / p> div

class

=

"

video-wrapper

"

& gt;


& lt;

video

Playinginline

autoplay

bị tắt tiếng

loop

poster

=

"

cake.jpg

"

& gt;


& lt;

nguồn

src

=

"

my-css-video-background.webm < p class = "dấu chấm câu"> "

loại

=

"

video / webm

"

& gt;


Trình duyệt của bạn không hỗ trợ thẻ video.

& lt; /

video

& gt;


& lt; /

div

& gt;

Và đây là nơi điều kỳ diệu xảy ra:

  

. video-wrapper

{

vị trí

:

tương đối

;

width

:

400px

; < / p>

height

:

200px

;




tràn

:

ẩn

;




text-align

:

center

;


hiển thị

:

flex

;


align-items

:

center

;


justify-content

:

center

;


}

Tôi đã thêm nhận xét về mã CSS để bạn có thể xem từng thuộc tính dùng để làm gì.

Tạo video nền bao phủ toàn bộ vùng chứa

Thông thường nền sẽ bao phủ toàn bộ vùng chứa. Chúng tôi thường làm điều này với CSS bằng cách sử dụng style background-size: cover trực tiếp trên hình nền. Nhưng vì trong trường hợp này, video của chúng tôi thực sự không phải là nền CSS, chúng tôi sẽ sử dụng một thủ thuật nhỏ khác bằng cách sử dụng object-fit: cover cùng với height: 100% width: 100% trên phần tử video của chúng tôi.

  

video

{



object-fit

:

cover

;

height

:

100%

;


chiều rộng

: 100%

;



vị trí

:

tuyệt đối

;


hàng đầu

: 0

;


trái

:

0 < p class = "dấu chấm câu">;


}

Để minh họa điều này rõ hơn, đây là ví dụ về nền video không bao phủ toàn bộ vùng chứa:

Xem Bút
trên
CodePen .

Và đây là cùng một nền video bao gồm toàn bộ vùng chứa:

Xem Bút
trên
CodePen .

Thêm các phần tử ở trên cùng của nền video

Hiện tại, chúng tôi không có gì đặc biệt phải làm để thêm nội dung lên đầu video của mình. Và đó là do chúng tôi đã thêm thuộc tính position: relative vào vùng chứa video khi đặt video làm nền (được định vị tuyệt đối).

Bất kỳ thứ gì bạn thêm vào sau phần tử video sẽ được đặt trên đầu phần tử đó.

  

& lt; < / p> div

class

=

"

video-wrapper

"

& gt;


& lt;

video

Playinginline

autoplay

bị tắt tiếng

loop

poster

=

"

cake.jpg

"

& gt;


& lt;

nguồn

src

=

"

my-css-video-background.webm < p class = "dấu chấm câu"> "

loại

=

"

video / webm

"

& gt;


Trình duyệt của bạn không hỗ trợ thẻ video.

& lt; /

video

& gt;




& lt;

div

class

=

"

tiêu đề < p class = "dấu chấm câu"> "

& gt;


< p class = "thẻ mã thông báo">

& lt;

h1

& gt;

Blueberry Cheesecake

& lt; /

h1

& gt;


& lt;

nút

& gt;

Công thức tại đây

& lt; /

nút

& gt;


& lt; / div

& gt;


& lt; /

div

& gt;

Đây là kết quả cuối cùng:

Xem Bút
trên
CodePen .

Định cấu hình video

Nếu bạn nhận thấy, trong mã HTML của chúng tôi, chúng tôi đã thêm khá nhiều thứ vào phần tử video . Những thứ quan trọng nhất là loop , mute autoplay .

  

& lt; < / p> video

Playinginline

tự động phát

tắt tiếng

loop

người đăng

< p class = "dấu chấm câu mã thông báo attr-equals"> =

"

cake.jpg

"

& gt;


& lt;

nguồn

src

=

"

my-css-video-background.webm

"

loại

=

"

video / webm

"

& gt;


Trình duyệt của bạn không hỗ trợ thẻ video.

& lt; /

video

& gt;

Video sẽ không thể tự động phát trừ khi chúng tôi tắt tiếng chúng trước. Và nếu bạn đang sử dụng nền video thì tùy chọn loop cũng khá phổ biến, vì vậy video sẽ phát liên tục.

áp phích là hình ảnh chúng tôi muốn hiển thị khi video vẫn đang tải và chưa thể tự động phát.

Định dạng video và khả năng tương thích của trình duyệt

Phần tử video HTML 5 cho phép sử dụng nhiều tệp nguồn. Điều này có nghĩa là chúng tôi có thể cung cấp video của mình ở các định dạng khác nhau để tương thích với trình duyệt.

  

& lt; < / p> video

Playinginline

tự động phát

tắt tiếng

loop

người đăng

< p class = "dấu chấm câu mã thông báo attr-equals"> =

"

my-static-image.jpg

"

& gt;


& lt;

nguồn

src

=

"

my-video-url.webm

"

< p class = "token attr-name"> type

=

"

video / webm

"

& gt;


& lt;

nguồn

src

=

"

my-video-url.mp4

"

type

=

"

video / mp4

"

& gt;


Trình duyệt của bạn không hỗ trợ thẻ video.

& lt; /

video

& gt;

Trong ví dụ này, trước tiên, chúng tôi cố gắng tải video webm và nếu trình duyệt không thể phát video đó, video sẽ trở về phiên bản mp4 của nó .

Không phải tất cả các trình duyệt đều có thể phát tất cả các loại định dạng video, hãy xem bảng khả năng tương thích cho từng định dạng video .

Định dạng mp4 được hầu hết các trình duyệt hiện đại chấp nhận, nhưng việc sử dụng các lựa chọn thay thế như webm cũng có thể hữu ích để tiết kiệm băng thông. Vì vậy, thêm cả hai có thể là một sự kết hợp tốt.

Nếu bạn băn khoăn về cách chuyển đổi từ định dạng này sang định dạng khác, bạn có thể sử dụng bất kỳ trình chuyển đổi trực tuyến nào. Chỉ cần Google "mp4 sang webm" hoặc "webm sang mp4" và bạn sẽ tìm thấy rất nhiều trình chuyển đổi trực tuyến.

Kết luận

Không có lý do gì để sử dụng video ngày nay. Video trong các trang web là một công cụ thiết kế rất mạnh mẽ có thể cung cấp cho trang web của bạn một giao diện hiện đại. Chúng dễ thực hiện, tương đồng với ảnh động GIF và chất lượng cao.

Như bạn có thể thấy, bạn chỉ cần một vài dòng CSS để đặt bất kỳ video nào làm nền. Và, nếu bạn muốn tiến thêm một bước nữa, bạn có thể chuyển sang chế độ toàn màn hình bằng cách sử dụng các thành phần như fullPage.js . Xem video ví dụ tại đây .

Trình duyệt của bạn không hỗ trợ thẻ video.

< p class = "ezoic-ad box-1 box-1-multi-122 adtester-container adtester-container-122">

Ezoic

báo cáo quảng cáo này


Xem thêm những thông tin liên quan đến chủ đề video hình nền css

How To Add a Video Background with HTML & CSS

alt

  • Tác giả: iEatWebsites
  • Ngày đăng: 2018-05-12
  • Đánh giá: 4 ⭐ ( 9241 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video you will learn how to add a video background to your website.

    Download code: https://gist.github.com/brickbones/16818b460aede0639e0120f6b013b69e

    Follow me on twitter: https://twitter.com/ieatwebsites

Code css hình nền bằng video

  • Tác giả: fcwordpress.net
  • Đánh giá: 3 ⭐ ( 6507 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Code css hình nền bằng video: Trong các dự án web đôi lúc khách hàng yêu cầu làm nền một trang hoặc khu vực nào đó bằng video, thì đây là

Phông Nền trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 1533 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thuộc tính *background* trong CSS được sử dụng để thiết lập hiệu ứng phông nền cho phần tử HTML trên trang web, các thuộc tính này gồm có: background-color, background-image, background-repeat, background-position, background-attachment v&agr...

Cách lấy Video làm Background với HTML5 & CSS

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 4 ⭐ ( 4633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

Css tạo hình nền tivi với video youtube chèn lên trên

  • Tác giả: congpho.blogspot.com
  • Đánh giá: 3 ⭐ ( 2003 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Tạo Video Background Bằng HTML CSS (Phần 2)

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 4533 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách thiết kế video background cho trang web được tạo bằng HTML, CSS nhé!

14381+ Nền,Mẫu video Tải xuống miễn phí

  • Tác giả: vn.pikbest.com
  • Đánh giá: 5 ⭐ ( 6514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm kiếm Video thiết kế mẫu tệp hình ảnh? Pikbest đã tìm thấy các mẫu Nền Video cho mục đích thương mại cá nhân. Để tìm hiểu thêm Video Tệp để thiết kế Tải xuống miễn phí cho bạn dưới dạng PSD,PNG,EPS hoặc AI,vui lòng truy cập PIKBEST

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Biểu mẫu JavaScript - cách sử dụng đầu vào biểu mẫu trong javascript

By ads_php