Skip to main content
All CollectionsCustomizing
Updating the Player Controls
Updating the Player Controls

Control how your viewers experience the video. You can autoplay your videos and change player controls as well!

Caroline F avatar
Written by Caroline F
Updated over a month ago

Note

Player controls cannot be customized within the audio player at this time.

Controls

The Controls tab includes options to tweak the video controls on your media. Don’t want viewers skipping important parts of your video? Seeya, Play Bar! You can customize your video however you’d like by adding or removing any buttons.

Start and End Behavior

Within the Controls panel, you can choose the start and end behavior for your video.

Need to autoplay your videos to grab attention? Check that Autoplay box, where you can set your video to Click for sound button,Muted, Play with sound, or Play sound if possible.

For end behavior you can choose from three options: Pause on the last frame, Reset to the first frame, and Loop the video.

Autoplay Your Videos

Need to capture your viewer’s attention right at page load? Can’t wait for them to click play? Autoplay is your new best friend.

To set your video to autoplay you’ll want to navigate to Controls in the Customize panel. There you’ll see a checkbox to Autoplay your video. You can choose to have the video play muted with a Click for Sound button, play Muted with no click for sound button (this is for autoplaying a silent video), Play with sound, or Play sound if possible.

Click for Sound will autoplay the video in a muted state, with the option for the viewer to manually turn on the volume. Muted will play the entire video silently. Play with sound will begin playback with audio, which means that the video will only autoplay in some browsers (where autoplay with sound is allowed). Play sound if possible will enable the video to autoplay everywhere, silently where required, and with sound where permitted.

Control panel autoplay options

Tip

The Muted option is handy for background videos and content without audio.

Note

Autoplay with sound is currently blocked by default on mobile devices, Chrome, and Safari. For the best experience across all devices/browsers, we recommend the Muted option, or the Play sound if possible option. Videos set to Play with sound will display a thumbnail and play button in contexts where play with sound is blocked.

Loop Your Videos

Setting your video to loop is a great way to keep your viewers engaged, or to just have some interesting background movement. At Wistia, we like to use looping autoplay videos to make high-quality GIF substitutes. Like this snazzy one of Joe dancing.

To loop your video, you’ll want to navigate to Controls in the Customize panel. You should see an option for End behavior. The default we set is for the video to Pause on the last frame. Switch the option to Loop the video, save your settings, and dance like Joe. 🎩

setting end behavior to loop the video in controls panel

Big Play Button

The Big Play Button overlays on your thumbnail. It’s visible before your viewer clicks play, and it indicates that your image is a video.

screenshot of player with big play button

If you’d like to further customize the Big Play Button (past selecting a color), you can do so with the Player API, or with your very own custom thumbnail.

Video Length on Play Button

Wistia’s player Vulcan allows you to display the time of the video on the big play button. This is the default setting, but you can disable the time stamp by unchecking this box.

screenshot of player with video length

Small Play Button

The small play button will pause and play your video. It will appear on your video when the viewer hovers over the video during playback. This option will also be shown if the Controls Visible on Load box is checked.

screenshot of small play button

Play Bar

The play bar allows your viewers to scrub through your video. Disabling the play bar will disallow the viewer to skip ahead (and/or hop backward) in your video. The play bar also includes a hover thumbnail preview. Now your viewers can see what’s coming up next without skipping forward.

screenshot of preview thumbnail

Captions Control

When enabled, the Captions control allows viewers to turn Captions on or off, and select a language (if more than one is available). Here, you can set Captions to appear on by default (Captions display automatically) or off by default (Viewer must manually turn Captions on).

CC button

Once captions are enabled, your preferences will be saved across all videos on the same domain. For more information on the captions functionality, check out our Transcripts and Captions overview.

Volume Control

This button allows a viewer to change the volume of your video. To adjust the volume, hover over the icon, and drag the black dot up or down.

screenshot of volume button and control

Full Screen

This option allows a viewer to watch your video in full screen. That’s pretty much its hit single.

screenshot of fullscreen button

Settings Control

Settings allow your viewers to choose their playback quality and speed.

screenshot of settings control button

Most videos are set to Auto, which will use adaptive streaming to play your videos. You can, however, manually choose a quality by selecting one from the settings menu.

screenshot of video quality menu

A viewer can also choose to set a playback speed for videos. This is great for long form teaching videos, or just regular old hilarity.

video speed controls

Note

If you’re using IE11, you won’t see the option to adjust playback speed. This is because IE11 isn’t able to consistently support a change in playback speed. If a user were to change the playback speed, and then play or pause the video, it would reset to a playback speed of 1.

Controls Visible on Load

All of your controls (play buttons, play bar, volume) can be set to be visible as soon as the thumbnail loads for your video. Just select this option in the Controls tab. Here’s what your video will look like when this is set to true.

Fun fact: this video has all controls turned on, including Controls Visible on Load.

Wistia Context Menu

You may have notice a small menu appear on your video when you right click. Let me introduce you to the Wistia Context Menu.

player controls context menu

Let’s walk through this. About Wistia brings folks to the Wistia website to learn more if they wish.

Report a Problem captures data from your current viewing experience. This is helpful for our Support Team when things aren’t working quite as expected. If you are experiencing any issues, submit a problem report, then reach out to our Support Team and let them know which video you submitted that report on.

Copy Link & Thumbnail is an easy way to grab, you guessed it, the link and thumbnail of the video you are watching. This is great way to easily share your video! You can read more on that function here.

360 Video

Have a 360 video? Dang, you’re ahead of the curve. 🌐

Check out our 360 video page for all the details about hosting 360 videos on Wistia.

If that’s not something you care about, that’s cool too. Just click the 360 video checkbox after you’ve uploaded your 360 video, and don’t forgot to save your customizations.

Controls on Mobile

Videos played in most mobile environments will utilize the Wistia player controls, however there are some key exceptions where playback is handed off to the native player of the device. When a video is playing in the native player this means that most customizations made in the Customize panel will not be applied, and the native controls will display in lieu of the Wistia player controls. This primarily occurs when entering fullscreen on iOS devices, or using some older mobile browsers which don’t fully support our modern mobile player.

Check out our screenshot of a Wistia video on an iPhone.

screenshot of native ios player controls

Popover Controls

Our popover embed has a few perks that aren’t in the Customize panel. You might not be in love with the animation we have for the thumbnail on a popover.

If that’s not your jam, you’ll just want to change one tiny piece of your popover embed code. Change popoverAnimateThumbnail=true to popoverAnimateThumbnail=false.

Afterwards, you’re good to go!

For more on customizing your popover embeds, check out our popover customizations page.

Troubleshooting

Sometimes your controls might look a little wonky, or be missing altogether. In some cases, you might have some overly aggressive CSS that’s affecting your video embeds. We recommend testing out the Fallback embed. It’s a more resilient iframe embed code type, that is not as easily overwhelmed by aggressive CSS.

Still no luck? Check out our embed troubleshooting guide for more or give us a holler.

Did this answer your question?