Video Slider

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Video Slider

Video Slider widget by Without Code

The Video Slider widget is an excellent way to show off your featured videos. This slider packs all the functionality of our standard image sliders, yet allows site visitors to view YouTube, Vimeo or vzaar videos without leaving your site. Display options include carousel slider format, custom thumbnails, lightbox and constrained video playback modes.

Tutorial Video

Setup

Widget Placement

  • Drop the Video Slider widget on your page. We suggest placing the widget in a new row.
  • Determine the width you would like the slider to have. This slider may be used in fixed or full width. Unless you’ve placed the widget into a row that has previously been set to full width, the slider will be fixed width by default.
  • For a full width slider display, click on the row the widget is placed in, and select “edit design”. Then enable “Full Bleed Row”.

Widget Options (Content)

  • Open the widget option panel by clicking on the widget.
  • Unique ID: As with many widgets, a unique ID is necessary when using multiple widgets on the same page.
  • Videos / List Items: The “List Items” represent individual slides in your slider. Click one to open additional options…
  • Direct Video Link: Enter the URL for the video. Videos from YouTube, Vimeo and vzaar are supported.

Note that vzaar videos require playback mode to be set to “Within Container”

  • Custom Poster: This option allows you to use a custom thumbnail for the video slide. If no custom image is used, the default video thumbnail will be used (this comes from the video service, YouTube/Vimeo/vzaar). When possible, we suggest using a custom thumbnail, as this will result in  a sharper thumbnail image.
  • Carousel Height: Sets the height of the slider.
  • Videos to Display at Once: This setting determines the number of slides seen at the same time. The default is one, however, you may display more than one slide at a time to achieve a carousel style display. See Centered Slide setting below for additional tips on carousel display.

Note that Lightbox playback mode should be used when multiple videos are displayed at once.

  • Playback Mode: When a video is played, it can be played within the slideshow container, or in a lightbox.
  • Autoplay Video: This setting enables automatic playback of video.

Note that automatic video playback is restricted in some browsers

  • Loop Slideshow: As the title implies, this setting loops the slideshow so that it repeats.
  • Enable Centered Slide: This setting is useful for carousel style sliders. A good way to utilize this feature is to use an even number of slides (such as two). When this setting is enabled, and two slides are displayed at once, one image will be centered, while only a portion of the previous and next slides are shown. The way the math is calculated is 1 (center slide) + 2 halves (previous and next slides) = 2. Sliders with an odd number of slides visible will always have a centered slide. Even number of slides without Enable Centered Slide enabled:

    Even number of slides with Enable Centered Slide enabled:
  • Margin Between Slides: Sets the space between slides.
  • Slide Transition Duration: Sets the time it takes for slide transitions to complete
  • Autoplay Slides: This opens an additional option panel with the following options…
  • Time Between Slides: Sets the time between slide transitions.
  • Pause on Hover: Pauses slideshow while hovering over slide.
  • Navigation Settings: This opens an additional option panel with the following options…
  • Previous and Next Button Navigation: Displays previous and next arrow buttons, and enables their use for navigation.
  • Pagination Dot Navigation: Displays pagination dots, and enables their use for navigation.

Widget Options (Design)

In the Design section, you will find settings that control the styling for navigation styling, video player background color, and more. Individual parameters will not be explained in detail here, as the labels are self explanatory.

Was this article helpful?

Related Articles

Join Now