Cách sử dụng tiện ích Video

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích video là gì ?

tiện ích video (Video Widget) trong Elementor là một khối xây dựng (building block) được thiết kế đặc biệt để bạn dễ dàng nhúng và tùy chỉnh video trên trang web của mình.

Hãy hình dung nó như một “cái khung” hoặc “cái hộp” đã được tạo sẵn trong Elementor. Thay vì phải viết mã phức tạp để chèn một video từ YouTube hay Vimeo, bạn chỉ cần kéo “cái hộp” này vào trang của mình. Sau đó, Elementor sẽ cung cấp cho bạn các tùy chọn đơn giản để:

• Chỉ định video bạn muốn hiển thị: Bằng cách dán đường link (URL) của video (ví dụ: từ YouTube, Vimeo) hoặc chọn một video đã tải lên website của bạn.
• Điều chỉnh cách video hoạt động: Tùy chọn tự động phát, tắt tiếng, lặp lại, hiển thị hoặc ẩn các nút điều khiển của video.
• Kiểm soát giao diện của video: Thay đổi kích thước, màu sắc của nút “Play”, thêm hình ảnh hiển thị trước khi video chạy (lớp phủ hình ảnh).
• Tinh chỉnh vị trí và hiệu ứng: Đặt lề, khoảng cách, thêm hiệu ứng chuyển động khi người dùng cuộn trang.

Tóm lại, tiện ích video là một công cụ trực quan, kéo và thả trong Elementor giúp bạn:

• Nhúng video dễ dàng: Không cần mã hóa.
• Tùy chỉnh linh hoạt: Thay đổi cả nội dung và hình thức của video.
• Tiết kiệm thời gian: Giúp bạn tập trung vào thiết kế thay vì các chi tiết kỹ thuật.

3. Các bước sử dụng tiện ích video

Bước 1.Chỉnh sửa nội dung

Đây là nơi bạn thiết lập nguồn video và các tùy chọn cơ bản của video.

1.Nguồn: Ngay dòng đầu tiên, bạn sẽ thấy một hộp chọn có chữ “YouTube”. Nhấp vào đó, bạn sẽ thấy các lựa chọn khác:

• YouTube: Nếu video của bạn được tải lên YouTube, hãy chọn cái này.
• Vimeo: Nếu video của bạn ở trên Vimeo.
• Tự lưu trữ (Hosted): Nếu bạn đã tải video trực tiếp lên website của mình (thường dùng cho các video ngắn và cần cân nhắc về dung lượng).
• DailyMotion: Nếu video của bạn ở trên DailyMotion.

2.Liên kết:

Ngay bên dưới “Nguồn”, bạn sẽ thấy một ô có chữ “https://www.youtube.com/watch?v=…”. Đây là nơi bạn dán đường link (URL) của video bạn muốn hiển thị. Nếu bạn chọn YouTube hoặc Vimeo, hãy sao chép đường link video từ trang YouTube hoặc Vimeo của bạn và dán vào đây.

Nếu bạn chọn Tự lưu trữ, bạn sẽ thấy một nút “Chọn tệp video” để tải video của bạn lên từ thư viện media của WordPress.

3.Thời gian bắt đầu (Start Time) và Thời gian kết thúc (End Time):

• Hai ô này cho phép bạn chỉ định thời điểm video bắt đầu phát và kết thúc.
• Bạn có thể nhập số giây hoặc phút:giây (ví dụ trong hình: giây thứ 3 và kết thúc giây thứ 10).
• Nếu bạn muốn video phát toàn bộ, hãy để trống hai ô này.

4.Tùy chọn video (Video Options): (Thường có một mũi tên nhỏ bên cạnh để bạn mở rộng hoặc thu gọn)

• Tự động phát (Autoplay):
  • Nếu bạn bật tùy chọn này (gạt nút sang phải), video sẽ tự động bắt đầu phát khi người dùng truy cập trang.
  • Lưu ý: Việc tự động phát video đôi khi có thể gây khó chịu cho người dùng, hãy cân nhắc kỹ trước khi bật.
• Tắt tiếng (Mute):
  • Nếu bạn bật tùy chọn này, video sẽ tự động phát ở chế độ tắt tiếng. Thường được dùng khi bật “Tự động phát”.
• Lặp lại (Loop):
  • Nếu bạn bật tùy chọn này, video sẽ tự động phát lại sau khi kết thúc.
• Hiển thị nút điều khiển (Show Controls):
  • Nếu bạn bật tùy chọn này, người dùng sẽ thấy các nút điều khiển video mặc định (play/pause, âm lượng, toàn màn hình…).
  • Nếu bạn tắt, các nút điều khiển này sẽ bị ẩn.
• Chế độ riêng tư nâng cao (Privacy Enhanced Mode) (chỉ dành cho YouTube):
  • Khi bật, YouTube sẽ không lưu trữ thông tin về khách truy cập trên trang của bạn trừ khi họ phát video.
• Nhãn hiệu khiêm tốn (Modest Branding) (chỉ dành cho YouTube):
  • Khi bật, logo YouTube nhỏ sẽ không hiển thị trong thanh điều khiển.
• Hiển thị video gợi ý khi kết thúc (Suggested Videos When Ended) (chỉ dành cho YouTube):
  • Bạn có thể chọn hiển thị video gợi ý từ kênh của bạn hoặc từ bất kỳ kênh nào sau khi video chính kết thúc.

5.Lớp phủ hình ảnh (Image Overlay): (Thường có một mũi tên nhỏ bên cạnh để bạn mở rộng hoặc thu gọn)

• Bạn có thể chọn một hình ảnh để hiển thị trước khi người dùng nhấp vào nút phát video. Điều này giúp trang của bạn trông hấp dẫn hơn trước khi video được tải.
• Nhấp vào nút “+” để chọn hình ảnh từ thư viện media của bạn hoặc tải lên hình ảnh mới.

Biểu tượng phát:

• Bạn có thể chọn ẩn hoặc hiện biểu tượng nút “Play” trên lớp phủ hình ảnh.
• Gạt nút sang phải để hiển thị và sang trái để ẩn.

Bước 2. Chỉnh sửa kiểu hiển thị

Đây là nơi bạn tùy chỉnh giao diện của video.

1. Tỷ lệ khung hình (Aspect Ratio):

• Bạn có thể chọn tỷ lệ khung hình cho video của mình (ví dụ: 16:9 là tỷ lệ phổ biến cho video HD).
• Nhấp vào hộp chọn để xem các tùy chọn có sẵn.

Các tùy chọn khác (có thể có tùy thuộc vào phiên bản Elementor): Bạn có thể thấy các tùy chọn về đường viền (Border), bán kính bo tròn (Border Radius), bóng đổ (Box Shadow) cho khung video.

2. Lớp phủ hình ảnh: (Chỉ khi bạn chọn hiển thị biểu tượng phát ở phần Nội dung)

• Kích thước (Size): Kéo thanh trượt để điều chỉnh kích thước của biểu tượng phát.
• Màu sắc (Color): Chọn màu cho biểu tượng phát bằng cách nhấp vào ô màu và chọn màu từ bảng màu hoặc nhập mã màu.
• Màu nền (Background Color): Chọn màu nền cho biểu tượng phát (thường là một hình tròn hoặc hình vuông bao quanh biểu tượng).

Bước 3.Chỉnh sửa nâng cao

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của video.

1. Bố cục (Layout):

• Căn chỉnh (Alignment): Bạn có thể căn chỉnh video sang trái, phải hoặc giữa cột chứa nó.
• Chiều rộng (Width): Bạn có thể đặt chiều rộng của video theo phần trăm (%) hoặc pixel (PX).
• Chiều rộng tối đa (Max Width): Đặt chiều rộng tối đa mà video có thể đạt được.

2. Lề và Khoảng đệm (Margin & Padding):

• Lề (Margin): Khoảng cách bên ngoài phần tử video với các phần tử khác xung quanh. Bạn có thể điều chỉnh lề trên, dưới, trái, phải. Bạn có thể bỏ liên kết các giá trị để đặt lề khác nhau cho mỗi phía.
• Khoảng đệm (Padding): Khoảng cách bên trong phần tử video giữa đường viền và nội dung (trong trường hợp bạn có thêm hiệu ứng hoặc lớp phủ bên trong).

3. Z-index:

• Xác định thứ tự xếp lớp của phần tử nếu nó chồng lên các phần tử khác (thường không cần thiết cho video cơ bản).

4. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến video bằng mã CSS riêng (thường dành cho người dùng có kiến thức về CSS).

5. Hiệu ứng chuyển động (Motion Effects):

• Hiệu ứng khi vào (Entrance Animation): Chọn hiệu ứng xuất hiện cho video khi trang được tải.
• Hiệu ứng cuộn (Scrolling Effects): Tạo các hiệu ứng khi người dùng cuộn trang (ví dụ: video di chuyển, mờ dần…).
• Hiệu ứng chuột (Mouse Effects): Tạo các hiệu ứng khi di chuột qua video.

6. Nền (Background):

• Bạn có thể thêm màu nền hoặc hình nền cho vùng chứa video (thường không hiển thị trực tiếp trên video).

7. Đường viền (Border):

• Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho khung video.

8. Mặt nạ (Mask):

• Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho khung video.

9. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn video trên các loại thiết bị khác nhau nếu cần (ví dụ: hiển thị một video khác nhẹ hơn cho điện thoại).

10. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ video (thường không cần thiết cho người mới bắt đầu).

11. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của video một cách nâng cao.