WordPress Carousel Pro

  1. Home
  2. Docs
  3. WordPress Carousel Pro
  4. Shortcode Generator Settings
  5. Style Settings (Video Carousel)

Style Settings (Video Carousel)

Video Carousel Style Settings
Video Carousel Style Settings

(1) Videos: Users can add Videos from different Sources. Such as (Youtube, Vimeo, Dailymotion, Self-Hosted, Images). Add videos by putting Video ID from different sources. The last part of the URL is the ID. For Instance: 

    vimeo.com/95746815, youtube.com/watch?v=eKFTSSKCzWA

    You can add as many videos as you want as well as Rearrange/ Re-order your Videos by drag and drop.

(2) Space Between: Set space or gap between the slider items inside the Video carousel. Default value is 20px. You can set the value as you wish.

(3) Slider Border: Set border around the Video Carousel Item. The default value is 1px.There are 9 different border styles. You can also set your desired border color. Border Styles are the following:

  • Solid
  • Dashed
  • Dotted
  • Double
  • Inset
  • Outset
  • Groove
  • Ridge
  • None

(4) Inner Padding: Inner Padding is the space that’s inside the carousel item between the item and the border. The default Inner Padding value is 0px for video carousel. 

(5) Slide Background: Set a background color for the slider item with this option.

(6) Video Icon Color: Select a Video Icon Color for your carousel as you wish.

(7) Description: Show/Hide Video Description from the carousel.

(9) Image Sizes: Image Size means the thumbnail size of a video. Image Size is the term given to describe the height and width of an image in pixels. It will determine how big or small the image is on a page of your site. This option will automatically include all the image size your site has. You can set custom image size also. The default value is the original uploaded Image/video thumbnail.

 There will remain different image sizes available in the option to choose like below:

  • Thumbnail – hard: 150 x 150 
  • Medium – soft: 300 x 300
  • Medium_large – soft: 768 x 0
  • Large – soft: 1020 x 1024
  • 1536X1536 – soft: 1536X1536
  • 2048X2048 – soft: 2048X2048
  • Woocommerce_thumbnail – hard: 324X324
  • Woocommerce_single – soft: 416X0
  • Woocommerce_gallery_thumbnail – hard: 100X100
  • Shop_catalog – hard: 324X324
  • Shop_single – soft: 416X0
  • Shop_Thumbnail – hard: 100 X 100
  • Original uploaded image
  • Set custom size

Set Custom Size: This feature allows you to set a custom height and width for your image/thumbnail as you like. You can also select Soft-crop and Hard-crop.

  • Soft-crop: The Soft Crop in WordPress is the same as what’s commonly known as a Fit crop and is what we’d normally think of as a pure resize. It’s proportional, so the entire area of the image is retained. The entire image will be fit in a box of the dimensions you specify without cutting any of the images. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space.
  • Hard-crop: The hard crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that don’t fit in that box. If you want to create square thumbnails from rectangular images, make the width and height the same. You can set different types of square and rectangular hard crops. It has the property of making sure all the thumbnails are the same shape, which I prefer for its tidiness.

(10) Image Height CSS: The Image Height is one part of the information that determines a picture, photo, video thumbnail, or other image’s dimensions. You can set Video thumbnail height for different screen sizes to make your site responsive.

(11) Border Radius: Set a Border-Radius for the videos in the carousel. Border fits well in a square-size image. The Default value of Border Radius is 0 px.

(12) Variable Width: Variable Width specifies the column width for the display of videos in the carousel. It has no effect on the resolution of the Video. If this option is ON the number of the column will set depends on the column width. By default, this option is OFF.

(13) GrayScale: Grayscale is a range of monochromatic shades from black to white. Therefore, a grayscale video contains only shades of gray and no color. There are 4 Options:

  • Off: No grayscale effect
  • Gray and normal on hover: The Video Carousel becomes gray but when you hover the Video, the color becomes normal as it.
  • Gray on hover: When you hover a Content the Video will turn into gray.
  • Always gray: The Video Carousel will be gray all the time.

How to Create Video Carousel