Sử dụng CSS để tạo video toàn màn hình với phần tử video HTML5. Giải pháp CSS chỉ dành cho video HTML thuần túy.

Bạn đang xem : cách tạo video toàn màn hình

Video toàn màn hình đang là xu hướng và có lý do chính đáng cho điều đó. Việc có video nền trên web của bạn sẽ khuếch đại thông điệp của thương hiệu, thêm giao diện động và trông thật tuyệt vời. Trong hướng dẫn này, chúng tôi sẽ tạo video toàn màn hình bằng thẻ HTML 5 video . Chúng tôi cũng sẽ đặt nó trên nền. Tất cả chỉ bằng cách sử dụng CSS và HTML.

Trước khi đi vào chi tiết, hãy xem kết quả:

Xem Bút
trên
CodePen .

Thiết lập HTML của chúng tôi cho vùng chứa video toàn màn hình

Bây giờ chúng ta đã biết 2 quy tắc cơ bản này, hãy bắt đầu thiết lập HTML cho video nền của chúng ta:

  

& lt; < / p> div

class

=

"

video-container

"

& gt;


& lt;

video

autoplay

tắt tiếng

vòng lặp

người đăng

=

"

cake.jpg

"

& gt;


& lt;

nguồn

src

=

"

https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm

"

loại

=

"

video / webm

"

& gt;


& lt; /

div

& gt;


Phần tử video được tải với một số thuộc tính hữu ích có thể được sử dụng để kiểm soát cách thức và thời điểm phát video:

  • Tự động phát: Thuộc tính boolean autoplay đảm bảo rằng video toàn màn hình tự động phát trong nền.
  • Điều khiển: Sẽ không có điều khiển phát / dừng / tạm dừng cho video nền của chúng tôi, vì vậy chúng tôi đã bỏ qua thuộc tính control . Đây là thuộc tính boolean.
  • Đã tắt tiếng: Thuộc tính mute phân phát video toàn màn hình mà không có bất kỳ âm thanh nào.
  • Vòng lặp: Chúng tôi muốn video nền của mình tự động phát trong một vòng lặp nên chúng tôi cũng sử dụng thuộc tính loop . Thuộc tính loop cũng là một boolean.
  • Áp phích: Cuối cùng, thuộc tính poster sẽ cung cấp hình ảnh cho người dùng trong khi tải video nền. Ví dụ: nếu một người dùng có tốc độ internet chậm thì đó có thể là lựa chọn tốt hơn để phân phát hình ảnh. Nó cũng sẽ hiển thị hình ảnh trong trường hợp video toàn màn hình không hiển thị. Điều này có thể xảy ra khi phần tử HTML5 video không được trình duyệt cụ thể hỗ trợ.

Sử dụng CSS để đặt video ở chế độ toàn màn hình

Bây giờ chúng ta đã đặt phần tử video bên trong HTML của mình, hãy thiết lập CSS cho nó. Chúng tôi muốn video bao phủ toàn bộ trang.

 

video

{


chiều rộng

:

100vw

;


chiều cao < / p>

:

100vh

;


object-fit

:

cover

;


vị trí

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

đã sửa

;


hàng đầu

:

0

;


trái

:

0

;


}

Video toàn màn hình CSS của chúng tôi có vị trí cố định do đó bị xóa khỏi luồng thông thường của tài liệu HTML.

Ngoài ra, nó có các thuộc tính top left được đặt thành 0 nên nó được đặt ở góc trên cùng bên trái của phần nội dung trang web. Thuộc tính object-fit sẽ chỉ định cách thay đổi kích thước video toàn màn hình. Giá trị cover sẽ đảm bảo rằng video duy trì tỷ lệ khung hình và không bị méo. Hình ảnh sẽ được cắt bớt để vừa với width của video. Nó được đặt thành 100% vì chúng tôi muốn nó kéo dài video của tài liệu. Cuối cùng, thuộc tính height width của video toàn màn hình của chúng tôi có giá trị là 100 để đảm bảo rằng chiều cao và chiều rộng của video có tỷ lệ phù hợp để hiển thị tất cả nội dung video.

Đó là tất cả CSS mà chúng tôi cần để hiển thị video toàn màn hình trên trang của mình! Như đã nói, bây giờ chúng tôi có thể tiếp tục thêm những thứ khác được xếp lớp lên trên video toàn màn hình của chúng tôi, chẳng hạn như tiêu đề, nút và các yếu tố khác.

Phần tử lớp phủ trên đầu video nền

Bây giờ, hãy thêm một tiêu đề và một nút vào đầu video toàn màn hình như chúng ta thấy trong nhiều trang web sử dụng video nền. Chìa khóa ở đây là bất kỳ yếu tố nào được đặt trên đầu video phải có độ tương phản cao. Điều này sẽ làm cho chúng dễ dàng hiển thị so với video nền dẫn đến trải nghiệm người dùng và khả năng truy cập tốt hơn. Để làm điều này, chúng tôi sẽ tạo một phần tử div riêng biệt, phần tử này sẽ là phần tử gốc của tiêu đề và nút của chúng tôi:

  

& lt; < / p> div

class

=

"

header

"

& gt;


& lt;

h1

& gt;

Bánh phô mai việt quất

& lt; / h1

& gt;


& lt;

nút

& gt;

Công thức ở đây

& lt; /

nút

& gt;


& lt; /

div

& gt;

Ngay bây giờ, phần này sẽ xuất hiện dưới video toàn màn hình, không phải ở mặt trước. Chúng tôi phải áp dụng thêm một số thay đổi cho phần tử header để định vị nó trên video nền CSS:

  

. header

{

< br />

vị trí

:

tương đối

;


height

:

100vh

;


text-align

:

center

;


justify-content

:

center

;


}

Chúng tôi đã đặt một vị trí tương đối cho phần tử tiêu đề để phần tử này được đặt trên phần tử video được định vị cố định. Chúng tôi cũng đang sử dụng hei``ght: 100% trên phần tử header để đảm bảo hình ảnh của chúng tôi chiếm toàn bộ chiều cao của màn hình.

Video toàn màn hình CSS Responsive: chúng tôi có thực sự cần nó không?

Ngày nay, nhiều người lướt web từ điện thoại di động của họ. Nếu bạn đã đặt video nền CSS trên trang web của mình, bạn có thể tự hỏi làm thế nào để làm cho video đó đáp ứng.

Về cá nhân, chúng tôi nghĩ rằng phát video nền trên trang web có thể không phải là ý kiến ​​hay nếu người dùng đang duyệt trang trên thiết bị di động của họ. Chúng ta hãy tự hỏi lại bản thân câu hỏi quan trọng: tại sao chúng tôi lại chọn sử dụng video toàn màn hình ngay từ đầu? Bởi vì chúng tôi muốn gây ấn tượng với người dùng, thu hút sự chú ý của họ và mang đến cho họ trải nghiệm người dùng tuyệt vời. Liệu chúng ta có đạt được mục tiêu này trên một màn hình di động nhỏ bé không? Tôi e là không. Ngoài ra, phí dữ liệu và thời gian tải cũng là những điều cần tính đến.

Tuy nhiên, đây chỉ là ý kiến ​​cá nhân và quyết định cuối cùng phụ thuộc vào lý do cơ bản khiến bạn phải đưa video toàn màn hình lên web của mình. Đó là lý do tại sao trong hướng dẫn này, chúng tôi cũng sẽ tính đến việc bạn có thể muốn đặt video toàn màn hình đáp ứng.

Phát video toàn màn hình đáp ứng trên thiết bị di động

Nếu bạn muốn phát video nền đáp ứng trên thiết bị di động, hãy thêm thuộc tính Playinginline vào phần tử video . Thao tác này sẽ phát một video được nhúng trên thiết bị di động. Bạn cũng phải sử dụng các thuộc tính autoplay muted cùng với Playinginline .

  

& lt; < / p> div

class

=

"

video-container

"

& gt;


& lt;

video

autoplay

tắt tiếng

vòng lặp

Playinginline

poster

=

"

cake.jpg

"

& gt;


& lt;

nguồn

src

< p class = "token attr-value">

=

"

https://cdn.videvo.net /videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm

"

type

=

"

video / webm

"

& gt;


& lt; /

div

& gt;


Điều này sẽ tự động phát video toàn màn hình đáp ứng trên các trình duyệt trên thiết bị di động giống như ảnh GIF.

< / p>

Thay thế video toàn màn hình bằng hình ảnh trên thiết bị di động

Nếu bạn muốn xóa video nền trên điện thoại di động, chúng tôi khuyên bạn nên thay thế video đó bằng một hình ảnh. Để giải quyết vấn đề này, chúng ta có thể sử dụng truy vấn phương tiện:

  

@ media

screen

(

max-width

: < / p> 768px

)

{


html

{


nền

:

url

(

"https: //images.unsplash.com/photo-1620222071550-a5c7f8b600ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZGamp9tfHx8cm

)

;


nền -size

:

cover

;


}



. video- vùng chứa

{


hiển thị

: không

;


}

Truy vấn phương tiện phát hiện xem kích thước của màn hình hiển thị có chiều rộng nhỏ hơn 768 pixel hay không. Nếu vậy, chúng tôi ẩn video-container và thay vào đó hiển thị một hình ảnh tĩnh. Thay vào đó, tiêu đề và nút sẽ được hiển thị trên đầu hình nền.

2 lỗi phổ biến cần tránh trên video nền CSS

Bây giờ bạn gần như đã sẵn sàng để tạo video toàn màn hình của riêng mình! Tuy nhiên, trước khi kết thúc hướng dẫn này, chúng tôi muốn cảnh báo về một số lỗi thường gặp khi sử dụng video nền.

Video toàn màn hình có thể khiến người dùng của bạn thích thú nhưng cũng có thể là cơn ác mộng tồi tệ nhất của họ. Bạn đã bao giờ vào một trang web mà video nền quá ồn ào khiến bạn phải rời khỏi trang web đó ngay lập tức? Tôi chắc chắn rằng bạn đã từng có trải nghiệm như vậy… Tất nhiên, chúng tôi không muốn gây ra tác động tiêu cực như vậy cho người dùng của mình. Đó là lý do tại sao chúng ta phải nhớ 2 quy tắc vàng đơn giản khi thiết lập video toàn màn hình.

Xin hãy im lặng

Chúng tôi muốn người dùng giữ bình tĩnh và thư giãn khi lướt web của chúng tôi. Không làm anh ta sợ hãi và bỏ chạy. Đó là chúng tôi luôn khuyên bạn nên tắt tiếng bất kỳ video nền nào mà bạn đặt trên trang web của mình. Bạn có thể cung cấp cho người dùng tùy chọn để bật tiếng nhưng giữ tắt tiếng theo mặc định.

Càng ngắn, càng tốt

Thời gian là vàng. Không "ăn cắp" kho báu này từ người dùng. Video của chúng tôi không được dài quá 20-30 giây. Một video dài hơn có thể khiến người dùng chán nản và khiến họ có lý do để rời khỏi trang web của bạn để tìm kiếm thứ khác không khiến họ mất thời gian quý báu.

Ezoic

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

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


Xem thêm những thông tin liên quan đến chủ đề cách tạo video toàn màn hình

Cách Tạo Video Ở Góc Nhỏ Màn Hình Trong Filmora X - Hiệu ứng PIP Trong Filmora

alt

  • Tác giả: Elearning Supporter
  • Ngày đăng: 2021-11-10
  • Đánh giá: 4 ⭐ ( 3770 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong video này mình sẽ hướng dẫn các bạn tạo video ở góc nhỏ màn hình trong Filmora X một cách nhanh chóng và dễ dàng.

    Nếu các bạn thấy video hữu ích, hãy like, comment và subscribe kênh của mình nhé. Nhớ bật chuông để không miss các video tiếp theo.

    Mời mình cốc Cafe ở đây nhé: https://unghotoi.com/1621347011fhibv

    Công cụ Hỗ Trợ YouTube Miễn Phí Rất Hay:

    ✔️ TubeBuddy: https://www.tubebuddy.com/Jackynguyen (affiliate)

    20% Off Mã giảm giá khi mua TubeBuddy: Jackynguyen

    Xem Hướng Dẫn Mua Bản Quyền Filmora bằng tiếng Việt tại đây: https://e-techreview.com/2018/05/23/20-off-ma-giam-gia-phan-mem-bien-tap-video-filmora-cho-windows/

    Phần mềm mình dùng để edit video là Filmora X. Đây là phần mềm có trả phí các bạn nhé. Nếu bạn nào có nhu cầu mua license của Filmora 9 và Filmora X (bản quyền trọn đời) thì đừng quên sử dụng Coupon giảm giá 20% của mình để tiết kiệm tiền nhé. Bình thường giá trên website là $69.99. Dùng mã rồi còn $55.99 thôi nhé.

    - Tải và cài đặt Filmora X cho Windows (64 bit): https://bit.ly/31iOczu

    - Tải và cài đặt Filmora X Cho macOS: https://bit.ly/2H6F8qc

    - Lấy mã giảm giá 30% Filmora X cho Windows, click vào đây: https://bit.ly/31elqA4

    - Lấy mã giảm giá 30% Filmora X cho macOS thì click vào đây: https://bit.ly/35b2cw2

    Liên hệ với mình khi cần hỗ trợ việc mua phần mềm Filmora X:

    Email: proscreenrecorder@gmail.com

    Số Zalo/ Viber/ Gọi Điện: 0962835036

    Facebook Fanpage: https://www.facebook.com/Elearning-Supporter-101180998754784/

    Twitter: https://twitter.com/JackyNg23302005

    Xem kênh tiếng Anh của mình: https://www.youtube.com/channel/UC5h2IXSy-aI2o-SagN1QJYg

    Phần mềm quay màn hình mình dùng: https://bit.ly/2zkxlR6

    Hãy ủng hộ kênh của mình để nó ngày càng phát triển bạn nhé.
    ElearningSupporter Filmora Hiệu_ứng

    Affiliate Links: Trong video này có chứa link affiliate. Khi bạn mua sản phẩm từ link mình đặt trong mô tả, mình sẽ được hưởng hoa hồng từ người bán. Phần này không ảnh hưởng đến giá bạn mua dưới bất kỳ hình thức nào.

Cách chuyển đổi video để full màn hình-->>

  • Tác giả: tinhte.vn
  • Đánh giá: 3 ⭐ ( 7717 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách chuyển đổi video để full màn hình-->>
    **Sau đây mình sẽ cho các bạn biết 1 cách để xem video trên máy cảm ứng (ở đây tớ nói chi tiết đặc điểm thông số của dòng Nokia nhé.

Phát video trong màn hình toàn bộ bản trình bày của bạn

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 8415 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập video trong bản trình bày PowerPoint để nó phát toàn màn hình.

Top website quay màn hình online nhanh gọn không cần cài đặt

  • Tác giả: suachualaptop24h.com
  • Đánh giá: 5 ⭐ ( 9229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ quay màn hình online sẽ là giải pháp thay thế tiện lợi cho các phần mềm như Camtasia, Bandicam… Với các website được chia sẻ, bạn sẽ dễ dàng ghi lại nội dung màn hình nhanh chóng dù máy tính chạy Windows hay MacOS.,Sửa chữa laptop 24h với dịch vụ sửa laptop, macbook lấy ngay, vệ sinh bảo

Cách Tạo Video Hướng Dẫn Bằng Phương Pháp Quay Màn Hình

  • Tác giả: atomi.vn
  • Đánh giá: 5 ⭐ ( 4370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết ngày hôm nay, hãy cùng nhau tìm hiểu các loại video hướng dẫn bằng phương pháp quay màn hình và cách tạo ra chúng.

Đặt các tùy chọn phát cho video trong slide trình chiếu

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

Cách quay video màn hình máy tính Win 11, 10, 7, 8 bằng phần mềm

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 8572 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách quay video màn hình máy tính, PC, laptop, chất lượng cao, chỉnh sửa dễ dàng

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  Cách chuyển một số thành chuỗi trong JavaScript - chuyển đổi thành chuỗi trong javascript

By ads_php