Troubleshooting SiteOrigin Video Widgets: Common Issues and Solutions

Many WordPress users rely on the SiteOrigin Widgets Bundle to add video content to their pages. However, integrating videos from sources like YouTube or using self-hosted files can sometimes lead to unexpected behavior. This guide covers the most common issues reported by users and provides practical solutions to get your videos working correctly.

1. Video Autoplay Not Working on iOS or Mobile Devices

The Problem: A video set to autoplay works on desktop but not on an iPhone or iPad.

Why It Happens: This is not a bug with the widget but a restriction imposed by Apple's Safari browser and iOS. To preserve mobile data and improve user experience, Safari prevents videos from playing automatically unless they are muted.

The Solution: Ensure your video is muted. For the Video Player widget, use the 'muted' option if available. If you are embedding a YouTube video, you can often add parameters to the URL like &mute=1 or &autoplay=1&mute=1. If the video is in a Hero widget, note that autoplay on mobile is generally not supported, and a background image should be set as a fallback for mobile viewers.

2. Background Video Not Displaying at Full Width

The Problem: A video background only occupies part of its container row instead of stretching to full width.

Why It Happens: This can be caused by a theme or plugin CSS conflict that overrides the widget's default full-width styling.

The Solution: First, confirm the row layout is set to 'Full Width' in the Page Builder. If the issue persists, you will likely need to add custom CSS. Inspect the page using your browser's developer tools to identify the specific CSS class causing the constraint and write a rule to override it.

3. Video Player Not Visible (Empty Container)

The Problem: The space for the video player is present on the page, but the video itself does not load, leaving an empty <div class="sow-video-wrapper"></div>.

Why It Happens: This is often caused by an incorrect video URL, a problem with the specific video service (e.g., a typo in a YouTube link), or a JavaScript error on the page that prevents the player from rendering.

The Solution: Double-check the video URL for accuracy. Try using a different video from the same service to see if the problem is isolated to one file. Open your browser's console (F12) to check for any JavaScript errors that might be interfering with the widget's functionality.

4. Controlling YouTube Embed Options (e.g., Related Videos)

The Problem: An embedded YouTube video shows related videos at the end, which you want to disable.

Why It Happens: The widget's oEmbed method may not always pass through all URL parameters correctly to customize the YouTube player.

The Solution: To have full control over YouTube player parameters like rel=0 (to disable related videos), modestbranding=1, or mute=1, consider using a Custom HTML widget instead. Paste the standard YouTube embed iframe code directly into the widget and modify the `src` URL to include your desired parameters: src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&rel=0".

5. Adjusting Video Player Size and Responsiveness

The Problem: You need to control the dimensions of the video player to make it fit a specific layout.

The Solution: You can add custom CSS directly within the Video Player widget. In the widget's 'Layout' or 'Styles' tab, look for a 'CSS Styles' textarea. To set a specific size, you could add rules like width: 100%; height: auto; to make it responsive and fill its container. For more fixed dimensions, use values like width: 250px; height: 250px;, but note this may not respect the video's aspect ratio for self-hosted files.

Note: The information in this article is based on community reports and may change with future updates to the SiteOrigin Widgets Bundle plugin or WordPress core.