Video Player

The Video Player Widget plays a video on your page. Use a video file from your Media Library, or a video from YouTube, Vimeo or another video site.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate the Video Player Widget.

You can use the Video Player Widget anywhere:

Page Builder: Insert the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block.
Block Editor: Insert the SiteOrigin Video Player block. You will find it in the SiteOrigin category.
Theme and Plugin Widget Areas: Insert the widget into any theme or plugin widget area.

Settings

The Video Player widget form with a self-hosted video

Title
An optional widget title above the video.

Video location
Choose Self hosted for a video file, or Externally hosted for a video on a site like YouTube or Vimeo. Default: Self hosted. The other settings change with your choice.

Self Hosted

Video File

Sources
Click Add to add a video file. You can add the same video in more than one format, for example MP4 and WebM. The browser plays the first format it supports.

  • Select video: Click Choose Media to select a video from the Media Library, or enter the address of a video file in the External URL field.

Select cover image
An image that shows before the video plays.

Video Playback

Autoplay
Starts the video when the page loads. Disabled by default. Most browsers only autoplay a muted video, so the widget mutes the video when Autoplay is on.

Loop
Plays the video again when it ends. Disabled by default.

Use FitVids
Scales the video to the full width of the widget area and keeps its aspect ratio. New widgets start with it disabled, so check it to turn it on.

Hide Player Controls
Hides the play button, progress bar and other controls. Visitors can click the video to play or pause it. Disabled by default.

Externally Hosted

Video File

Video URL
The address of the video page, for example a YouTube or Vimeo link.

Video Playback

Autoplay
Starts the video when the page loads. Disabled by default. Most browsers only autoplay a muted video, so the widget mutes the video when Autoplay is on.

Loop
Plays the video again when it ends. Disabled by default.

Use FitVids
Scales the video to the full width of the widget area and keeps its aspect ratio. New widgets start with it disabled, so check it to turn it on.

Use oEmbed
Shows the video site’s own player, for example the YouTube player. Enabled by default. Disable it to play YouTube videos in the WordPress MediaElement player. Videos from other sites always use the site’s own player.

A video with its cover image and controls on the front end

SiteOrigin Premium

The Embed Blocker Addon in SiteOrigin Premium can hold back YouTube and Vimeo videos in your page content until the visitor agrees to load them. It works when Use oEmbed is enabled. Enable the sites you need in the addon settings.

Advanced Customizations

Add these snippets to your child theme functions.php file or a code snippets plugin.

Keep the Sound on Autoplay Videos

By default, the widget mutes videos that autoplay in its own player. This filter turns that off. It does not change videos that use oEmbed. Most browsers only autoplay muted videos, so the video may not start on its own.

add_filter( 'sow_video_autoplay_mute_self_hosted', '__return_false' );

Show the Cover Image When the Video Ends

By default, a self-hosted video stops on its last frame. This filter shows the cover image again when the video ends.

add_filter( 'sow_video_show_cover_on_end', '__return_true' );

Change the Video Element Attributes

The siteorigin_widgets_sow-video_local_video_args filter changes the attributes of the <video> element. This example loads only the video metadata until the visitor presses play.

add_filter( 'siteorigin_widgets_sow-video_local_video_args', function( $video_args, $instance ) {
	$video_args['preload'] = 'metadata';
	return $video_args;
}, 10, 2 );

Add Content Before or After the Video

The siteorigin_widgets_sow-video_before_video and siteorigin_widgets_sow-video_after_video actions run before and after the video. Each receives the widget settings.

add_action( 'siteorigin_widgets_sow-video_after_video', function( $instance ) {
	echo '<p class="video-note">Video by Northfield Studio.</p>';
} );