Cách thêm video background cho website WordPress của bạn

Video background hay video chạy dưới nền là một trong những tính năng hấp dẫn dành cho website của bạn. Việc sử dụng video background giúp cho trang web của bạn sống động, thú vị, và trưng bày được nhiều hình ảnh, thông tin hơn về trang. Tuy nhiên không phải ai cũng biết cách thêm video background vào trang. Vậy nên hôm nay mình sẽ mách cho các bạn những cách làm đơn giản nhất để có được video chạy dưới nền thật đẹp nhé.

Dùng một theme WordPress hỗ trợ video background

Một số theme WordPress hỗ trợ trình chiếu video background sẵn nên bạn chỉ cần cài đặt để hiển thị nó thôi.

Ví dụ như theme Clean Blocks có hỗ trợ video background ở khu vực header cover. Khi sử dụng bạn chỉ cần vài thao tác đơn giản để chèn một video bằng cách vào Customizer, tìm phần Header Media để tùy chỉnh header media và làm theo yêu cầu của theme.

Dùng một theme WordPress hỗ trợ video background

Thường thì các theme sẽ cho phép bạn tải một video lên. Nhưng nhiều theme hỗ trợ nhúng link từ YouTube như mình làm ở trên. Như thế không những sẽ nhanh, đơn giản mà còn giúp trang web nhẹ hơn so với việc tải video lên, từ đó tối ưu tốc độ của website. Mỗi theme sẽ có cách làm khác nhau nên bạn cần tìm hiểu và đọc hướng dẫn cẩn thận.

Tuy nhiên khu vực hiển thị video sẽ bị hạn chế khi bạn sử dụng theme bởi theme chỉ hỗ trợ video chạy ở một khu vực nhất định nào đó. Nếu bạn muốn thêm video background vào một vị trí khác thì sao? Đó là lý do vì sao bạn nên dùng plugin để thêm video background vào trang WordPress.

Dùng plugin để thêm video background vào trang

Trên thị trường có nhiều plugin giúp bạn làm việc này. Sau khi nghiên cứu, mình thấy plugin Advanced WordPress Background (AWP) vừa dễ dùng cho những người không biết nhiều về kỹ thuật, vừa giúp hiển thị đẹp và có nhiều lựa chọn tùy chỉnh.

Lưu ý là plugin này chỉ hoạt động trên phiên bản WordPress 5.0 và Gutenberg editor. Nên bạn nhớ update WordPress và dùng Gutenberg nhé.

Bước 1: Cài đặt plugin

Bạn có thể tải plugin này tại wordpress.org, rồi vào Dashboard > Plugin > Add New > Upload Plugin, tải lên, cài đặt và kích hoạt nó.

Hoặc ở Dashboard > Plugin > Add New, bạn tìm tên plugin và click Install > Activate.

Cài đặt plugin để thêm video background cho website WordPress

Bước 2: Thêm một video background

Việc thêm video background cũng tương tự như bạn chèn một block ở trong Gutenberg. Vậy nên nếu bạn đã quen thuộc với Gutenberg thì sẽ dễ dàng thôi. Nếu chưa thì bạn có thể tham khảo thêm hướng dẫn dùng Gutenberg.

Bạn vào một trang hoặc bài viết muốn thêm video background, thêm một block mới và tìm từ khóa “awb” để tìm block Background của AWB.

Thêm block background

Sau khi chèn block này vào, ở sidebar bên phải, bạn chọn tab Block để cài đặt cho nó. Ở đây có 3 lựa chọn cho background là hình ảnh, màu nền, và video. Vì mình chèn video background nên chọn Video. Bạn có 2 lựa chọn, một là chèn video từ URL YouTube hoặc Vimeo, hai là tự tải video lên.

Tùy chọn để chèn video vào background

Nếu chọn cách thứ nhất, bạn chỉ cần chèn link vào phần Video URL là xong.

Chèn URL của video vào ô

Cách thứ 2, bạn vào phần Self Hosted. Bạn có thể chọn một trong 3 định dạng video sau để tải lên:

Chọn định dạng cho video background

Bạn chỉ cần chọn định dạng video mong muốn và chọn một video có sẵn trong thư viện hoặc tải mới lên.

Bước 3: Tùy chỉnh video background của bạn

Hiển thị video với toàn bộ chiều cao và thêm block trên video

Sau khi chèn video xong, video chỉ được hiển thị bé như này thôi. Để hiển thị video với toàn bộ chiều cao, bạn chọn phần Full-height ở thanh công cụ trên block.

Hiển thị video background với dầy đủ chiều cao

Dưới đây là video background sau khi đã được hiển thị Full-height và chèn thêm chữ vào. Bạn có thể tùy chỉnh cỡ chữ, màu chữ, … như thường ở tab Block trên sidebar và chọn vị trí cho chữ. Việc này rất hữu ích nếu bạn muốn đặt video này làm header cover hoặc các phần call to action đó.

Tùy chỉnh cỡ chữ, màu chữ cho video background.

Thậm chí bạn còn được phép thay văn bản bằng bất kì block. Việc này tương tự chèn một block của Gutenberg vào thôi.

Cài đặt Video

Ở tab Video, bạn nên cài đặt một số thông số chính như sau để tiện cho việc hiển thị video background:

Cài đặt thông số chính cho video

(1): bạn có thể bật hoặc tắt video background trên thiết bị di động.
(2) và (3): bạn nhập thời gian bắt đầu và kết thúc video tại đây. Nó cho phép bạn hiển thị những đoạn video bạn muốn, nhất là khi video gốc quá dài.
(4): bạn có thể lặp lại video khi kết thúc. Mình khuyên bạn nên bật tính năng này để video luôn được chạy nhé.

Cài đặt Poster Image

Kéo xuống dưới, bạn sẽ thấy phần Poster Image. Ảnh bạn chọn ở đây sẽ được hiển thị khoảng 1 giây trước khi video được chiếu. Các tùy chọn ở dưới cho phép bạn chọn kích cỡ, cách hiển thị phù hợp cho ảnh.

Chọn kích cỡ, cách hiển thị phù hợp cho ảnh Poster Image của video background.

Để bạn dễ tưởng tượng thì đây là kết quả khi thêm poster image.

Kết quả khi thêm poster image vào video background.

Cài đặt Overlay

Phần (1) là màu của lớp phủ (overlay) cho video background, còn (2) là độ trong suốt của lớp phủ. Ví dụ, trang web của mình có tông màu chủ đạo là cam, vậy nên mình chọn lớp phủ màu cam cho video để đồng bộ với thiết kế của web.

Cài đặt Overlay cho video background

Còn phần Color Palette là màu thay thế cho video. Nói cách khác, bạn chuyển từ video background sang một lớp màu nền. Để xóa màu nền này thì bạn chọn nút Clear.

Xóa màu nền của video background

Cài đặt hiệu ứng Parallax và Mouse Parallax

Tại tab Parallax, bạn có thể bật, tắt hiệu ứng và chọn các kiểu parallax khác nhau rất dễ dàng. Đây là một hiệu ứng rất đẹp và thú vị, bạn nên dùng và chọn kiểu phù hợp cho trang.

Cài đặt hiệu ứng Parallax cho background

Hiệu ứng parallax có thể khá quen với các bạn, nhưng hiệu ứng mouse parallax thì có vẻ lạ hơn. Hiệu ứng này được thấy rõ khi bạn di chuyển chuột ở trên video, phần hình ảnh trong video sẽ di chuyển theo.

Ở phần Mouse parallax, bạn bật hoặc tắt nó ở phần Enable, sau đó có thể chỉnh Size Speed. Speed càng thấp, tốc độ chuyển động video càng nhanh. Size càng thấp, video của bạn càng di chuyển nhiều hơn, tạo cảm giác video bị “giật” mạnh hơn khi di chuyển chuột.

Cài đặt hiệu ứng Mouse Parallax cho video background

Dưới đây là ví dụ khi mình chọn speed và size thấp nhất.

Kết quả sau khi thêm hiệu ứng Parallax và Mouse Parallax cho video background.

Cài đặt Spacing

Trong tab Spacing, để cài đặt khoảng cách từ video tới lề của trang, bạn nhập thông số về khoảng cách vào các phần Margin Padding. Ví dụ mình nhập padding là 10 và margin là 20 cho cả 4 phía của video.

Cài đặt khoảng cách từ video tới lề của trang

Cài đặt nâng cao

Ở tab Advanced, phần Additional CSS, bạn có thể thêm code tùy chỉnh cho video background. Còn phần HTML anchor cho phép bạn đặt link vào từ khóa cho heading trên video. Nếu bạn không biết gì về shortcode thì có thể bỏ qua phần này cho đỡ phức tạp.

thêm code tùy chỉnh cho video background và đặt link vào từ khóa cho heading trên video

Và đây là kết quả cuối cùng của mình. Video hiển thị khá đẹp mắt đúng không.

Kết quả sau khi cài đặt video backround cho website WordPress của bạn.

Lời cuối

Qua bài viết siêu chi tiết này, hy vọng bạn đã biết cách thêm một video background vào trang WordPress để thu hút người dùng rồi. Đối với plugin AWB, bạn nên sử dụng nó với những theme hỗ trợ mạnh cho Gutenberg như eStar chẳng hạn. Đây là trang web của mình sử dụng theme eStar và plugin AWB để có một video background đẹp mắt làm cover cho header:

Video background trong website WordPress của mình

Sự kết hợp hoàn hảo này giúp video background hiển thị đẹp hơn đúng không?

Bạn có muốn biết thêm các thủ thuật khác trong WordPress? Đừng ngại ngần chia sẻ và bình luận nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *