Set the video playback component to be the same size as the column background

I have set Video on the home page, but I found that the component length and width of Video can’t be made the same as the column length and width. To do the comparison, I set the background view of the columns.

At the same time, I did the Product Tab settings in the Pagination to Arrow, but I found that the Arrow is not on the right side of the row, may I ask how do I need to set it to the right side of the Tab Title? I have marked the position of Arrow with a red box.

Attachments:

You must be logged in to view attached files.

Hello,

01. To adjust the video size, edit the video element and navigate to the Style tab to modify the size settings.
https://ibb.co/LpGQzry

02. To adjust the arrow position, navigate to Pages > Edit Home Page with WPBakery > Edit Ajax Products Tabs, and change the arrow position.
https://ibb.co/qgWvQNY

Best Regards

01.According to your guide, no matter how you set the Height of the Size, it will not be able to reach the same size as the column background, thus overriding the image of the column background.

02.What do I need to do if I want to set the display style of the arrows? I want to set a white background for the arrows, and the display can look the same as the arrow effect for browsing images.

Hello,

01. Try adding the video as a column background to ensure it fits properly within the column.
https://ibb.co/wRMD1LM

02. I have reviewed your site, and it displays arrows on both the left and right sides.

Best Regards

01.I added the Video background according to your suggestion, but there is no guarantee that it can match the column width properly.

02.I’ve solved the problem with arrows in other ways

Attachments:

You must be logged in to view attached files.

Hello,

I have added a new video section to the bottom of your website’s home page. Kindly review the site and adjust the video element configuration to align with your specific requirements.

Best Regards

That Section you set up doesn’t show the effect I’m trying to achieve very well. I’m wondering if I use a Video background, how do I set it up to make sure that the Video content doesn’t exceed the width of the columns, and I need to limit the width of the Video display in the Video background.

Hello,

You need to follow the WPBakery documentation and add the video as per your requirements.
https://wpbakery.com/video-academy/full-height-row-and-video-background/

Best Regard

I viewed the link you sent me about Full Height Row and Video Background, but I don’t want to set the video background to Full High

Hello,

1. Issue with Arrows:
The issue with the arrows is a bug in the theme version 8.0.4, which was fixed in version 8.0.5. The current version of the theme is 8.0.6, and the client should have been advised to update the theme from the beginning of the communication instead of changing the arrow position options.

2. Video Element and Background:

• 2.1 Video Element Stretching:
It is not possible to stretch a video element to match the height of an adjacent column because the video element is not designed for such behavior. It only supports aspect ratio or height settings and cannot be used as a column background.

• 2.2 Recommended Solution:
The best approach to achieve the desired appearance is to use the WPBakery “Use video background?” option available in the row and column settings.

However, there is an issue with the “Use video background?” option in WPBakery: for some reason, the plugin does not add overflow: hidden to the columns containing video backgrounds. As a result, the video visually exceeds the boundaries of the column and appears stretched.

Since this option is a feature of the WPBakery plugin and not the WoodMart theme, its behavior cannot be modified directly by the theme. The recommended solution is:

1. Remove all content from the column with the video background and leave it empty.
2. Add overflow: hidden to the column containing the video background to prevent the video from exceeding its boundaries.

Add the following custom CSS to the Theme Settings > Custom CSS area:

.wpb_column.vc_video-bg-container {
  overflow: hidden;
}

Best Regards.

I have completed the setup according to your suggestion, but I found one problem is that this video background only shows part of the video, not the full Youtube video, is there any way to scale it down equivalently until it shows the full video?
https://ibb.co/n0VJ933

Hello,

The “Use video background?” option sets a video as the background, and the video is adjusted to fill the entire background of the column in both width and height while maintaining the aspect ratio of the original video, which in your case is 16:9.

The “Row” element and the “Use video background?” option are parts of the WPBakery plugin, and these are the settings chosen by its developers. We do not have control over this functionality on our end.

Best Regards.

[Author]

Posts