Video Pro

Device Specific Videos

In this demo, we have configured 3 completely different videos to show up on small, medium and large devices (phone, tablet, desktop). If you resize your browser and refresh, you will see a different video play. Normally you would use the same exact video, just with a different resoltuion. However, in order for you to see this feature in action, we have added different videos for each breakpoint.

These videos are short. However, you will also notice that 2 markers have been added to the timeline at 3s & 7s marks in the timeline.

Playlist

In this demo, if you click on the playlist control on the control bar, you will open the playlist menu. You can click on the video that you would like to play. After one video finishes playing, the next video in the playlist will immediately start playing.

Player CTAs

In this demo, You will see two different types of CTAs. The first CTA will launch at the 5 second mark. This is an in-player CTA. While we kept things simply here, you can add whatever content that you want. You can use this to display more content, a buy now button, ads/promotions, or anything else that you might want. More complex CTAs can be added via an iframe such as a subscription form.

You can dismiss the in-player CTAs by clicking on the close button. You can also use the spacebar to start playing the video again or the esc key to dismiss the CTA.

The in-player CTAs can be styled or positioned anyway that you would like.

The second CTA will launch after the video ends. This action is triggered from the Call to Action stack. The CTA stack has a bunch of more advanced trigger logic and actions. There are integrations made just for Video Pro.

Play on Hover

This is an interest use case as it allows you to seemlessly interact with your videos simply by hovering over them. The controls are always hidden, as well as the play button. This gives a very useful effect for giving quick previews of your videos, maybe for a product.

The video poster is set to display whenever you stop hovering over the video. The video will continue to loop as long as you are hovered over it. You could integrate CTAs into this for some more interesting interactions.

External Controls

In this demo, we are using the Video Pro Button stack as an external control to play/pause and mute/unmute a video. While the Video Pro Button stack is provided as an easy solution, you can use your own buttons for this as well. Simply set the class in the settings to be a class on your custom external button.

Most player controls have been hidden for this demo. Only the progress bar is displayed. This shows how you can disabled all controls and control the player soley from external controls.