Back to Documentation

Video Slider Block

The Video Slider block is a great way to display multiple videos, and only play the selected video when a user clicks play.

The Blockons WordPress plugin offers a great Video Slider block for you to display multiple videos all within an animated slider, and only play the selected video when a user clicks play.

With the Video Slider block you can add YouTube videos, Vimeo videos or upload your own custom hosted video files (only .mp4 at the moment).


Adding the Video Slider block:

To add the Video Slider block to your page you can click the little “Add Block” icon and search for “video”, “slider” or “blockons” to find the block and then click it to add the Video Slider to the page.

OR, you can also click to open the left sidebar and find it in the list there by either searching for it at the top, or you’ll find it in the “Blockons Blocks” category further down.

Add the Video Slider block
Add the Video Slider block
Video Slider block in blocks sidebar
Video Slider in blocks sidebar

Editing the Video Slider Block

Add your Video and Cover image

To add your videos and cover images for each slide, you will edit this within each slide in the live block.

In the top right-hand corner of each slide you will see 3 icons to Edit the slide, Duplicate the slide or Delete the slide.

Click on the Video / Edit icon to display the settings to select your video type to use, add your video ID and cover image for that slide.

The 3 options at the moment are only YouTube, Vimeo or your own custom .mp4 video.

Add your Blockons Video Slider video and cover image

If you select to add a YouTube video or Vimeo video… The next input requires ONLY the video ID which is found in the video URL. The setting also has a little hint showing an example.

When you enter the correct video ID, you should see the video display right below the ID setting.

Then upload a cover image which is displayed as the slide image before a user clicks to watch the video. We recommend uploading this image at the same landscape proportion that the video is, but it will center the image to fit the slide anyway.

When the Video Slider block is selected, you will see all the Video Slider Settings, Design Settings and Slider Controls Settings panels in the right sidebar, expanding each panel with display the different settings.

Video Slider Settings

Here you can edit the max-width of the video slider and then left, center or right align the slider.

You can also select from 3 styles for the slider – Plain, give the slider drop shadows or add a thick customizable border to the video slider.

Video Slider block Settings
Video Slider block Settings

Video Slider Design Settings

Depending on the slider style you’ve chosen, you will see different settings here to further customize the look of the slider roundness and the border thickness and color if you have the Bordered style selected.

Slider Design Settings
Slider Design Settings
Slider style bordered Settings
Slider style bordered Settings

Video Slider Controls

You can adjust the video slider controls and how they display on the video block.

Video Slider block Controls
Slider controls

Show or hide any of the controls… Change icons and pagination style to dots or numbers… And you can also select to only display the video slider controls when a user hovers over the slider.

If there’s anything you’re stuck with and need help, or you can think of neat, new features for the Video Slider block then please get in contact and let us know.