WordPress Carousel Pro

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

Style Settings (Video Source)

Style Settings (Video Source)

(1) Source: The user can add videos from different sources. Such as YouTube, Vimeo, Dailymotion, Wistia, and Self-Hosted.

(2) Video ID: Add videos by putting Video IDs from different sources. The last part of the URL is the ID. For Instance: 

  • Vimeo: vimeo.com/95746815
  • YouTube: youtube.com/watch?v=eKFTSSKCzWA
  • Wistia: https://example.wistia.com/medias/wlvp33lxr8

How to get Wistia video ID: Log into your Wistia account. Click on your uploaded video. Then click on Embed and Share. A window will open. Click on Share. Now you will get the video URL. Double click and copy the video ID from the URL and paste it as Wistia Video ID in the shortcode. For more, watch the video here.

N:B: You can add as many videos as you want as well as Rearrange/Re-order your Videos by drag

and drop.

(3) Title & Description: You can add a video title and description in this field.

(4) Section Title: Show or Hide your carousel section title.

(5) 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.

(6) Same Height: Check to make all items /slides the same height as the tallest one.

(7) Slide 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

(8) 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. 

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

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

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

(12) 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 a custom image size too. The default value is the original uploaded Image/video thumbnail.

There will remain different image sizes available in the option to choose, as 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

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 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.

(13) 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.

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

(15) 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 be set depending on the column width. By default, this option is OFF.

Watch the Video: How to Create Video Carousel