Troubleshooting YouTube Video Issues in the OnePress Theme

Integrating YouTube videos is a common task for WordPress site owners using the OnePress theme. However, users often encounter issues where videos don't play, resize incorrectly, or get stripped from the content. This guide compiles the most frequent problems and their community-tested solutions.

Common YouTube Video Issues and Solutions

1. Video Lightbox Play Button Not Working

The Problem: You've added a YouTube URL to the Video Lightbox section, but the play button is unresponsive and doesn't even look clickable.

The Solution: This is often caused by a z-index conflict, where another page element is layered on top of the button. A widely reported fix is to add the following CSS code via Appearance > Customize > Additional CSS:

.container-fluid { z-index: 10;}

2. Embedded Videos Not Resizing or Appearing Too Large

The Problem: Embedded YouTube videos ignore the dimensions set in the embed code and stretch to full width, or appear excessively large on the page.

Why It Happens: The OnePress theme uses a script called FitVids.js to make videos responsive. This overrides manual width and height attributes to ensure videos fit their containers, which can sometimes lead to unexpected sizing.

The Solution: Wrap your video embed code in a Bootstrap column div to control its width. The theme is built on the Bootstrap framework, so these classes will work.

<div class="col-md-6">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Adjust the col-md-6 class to a different number (e.g., col-md-8, col-md-4) to make the video wider or narrower. To center the video, wrap it in a div with offset classes or with text-align center:

<div class="col-md-6 col-md-offset-3" style="text-align: center;">
    ...iframe code...
</div>

3. YouTube Videos Stripped from Page Content

The Problem: When adding a page containing a YouTube video (via iframe or link) to a section like the Customizer's About section, the video is completely removed and only text displays.

Why It Happens: This is a security feature. Theme updates sometimes implement stricter content sanitization functions like wp_kses_post(), which strips out iframe tags by default.

The Solution: This typically requires a fix from the theme developers. If you encounter this, it is best to search for recent theme updates that address the issue.

4. Cropped or Non-Responsive Videos on Mobile

The Problem: Videos display correctly on desktop but are cropped or do not resize properly on mobile devices.

The Solution: This is frequently caused by a conflict with another plugin, particularly image optimization plugins that may incorrectly process iframes. Try temporarily disabling plugins to identify the culprit. As one user discovered, configuring the EWWW Image Optimizer to exclude iframes resolved the problem.

5. Unable to Disable Related Videos

The Problem: Adding the ?rel=0 parameter to a YouTube URL in the Video Lightbox section does not prevent related videos from showing at the end of playback.

Why It Happens: The lightbox functionality is provided by a third-party script called Magnific Popup, which constructs the embed URL itself.

The Solution: This requires a code modification. As found by a community member, the solution involves changing the source URL template in the Magnific Popup script from src: '//www.youtube.com/embed/%id%?autoplay=1' to include the additional parameter: src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'. Note: Modifying core theme or plugin files is not recommended as changes will be lost during updates. This modification would need to be done in a child theme.

General Best Practices

• Use the Video Lightbox Section: For a streamlined, pop-up video player, use the built-in Video Lightbox section instead of embedding a video directly into page content.
• Clear Caches: After making any CSS or code changes, clear your browser cache and any caching plugins on your site to see the results immediately.
• Use a Child Theme: For any code modifications beyond CSS, always use a child theme to prevent your changes from being overwritten by a theme update.

These solutions are based on community reports and resolutions. If your issue persists, searching for your specific error message can often lead to further insights.