Videos are not displaying full-width when using VideoPress and Theme X

[thecashbag]

I am using VideoPress to host my videos (it comes included with the upgraded version of JetPack).

But when I embed a VideoPress video into my post the player goes full screen, but the actual video does not. All of the videos get restricted to a height of 224. Here is a screenshot with annotations showing the problem: https://nimbus.everhelper.me/client/notes/share/986861/gbt2we9114pl2xm98cbx

And here is a live version of the test post you can look at: https://elementpaints.com/video-test-post/

I contacted VideoPress support, and they cannot find a problem on their end. Also I tested it on the Twenty Seventeen theme and it works fine. The problem only happens when using Theme X.

Here is the shortcode I am using to insert the VideoPress videos: [videopress xYCALZTS permalink="false" loop="true" autoplay="true"]

[thecashbag]

I also tried adding this code to my functions.php file. It’s provided by VideoPress and is supposed to help when themes don’t support responsive videos by default: https://jetpack.com/support/responsive-videos/

But it does not work. So I have removed that now.

/**
* Add theme support for Responsive Videos.
*/
function jetpackme_responsive_videos_setup() {
    add_theme_support( 'jetpack-responsive-videos' );
}
add_action( 'after_setup_theme', 'jetpackme_responsive_videos_setup' );

[john]

Hi there,

Thank you for writing in!

I`ve checked your site and you can solve your problem adding the following CSS under the code below to X > Launch > Options > CSS

iframe {
   width: 400px !important;
   height: 224 !important;
}

P.S: With this custom code, all iframes will affect all the pages, so, if you want to affect only the single post, add this custom CSS code:

  .single-post iframe {
   width: 400px !important;
   height: 224 !important;
}

Let me know if it worked

[thecashbag]

Hi, thanks for help, but it doesn’t work.

The problem is not that the background of the player is too big. The problem is that the video is too small.

These are large responsive videos that should be taking up the full-width of the blog post container. But for some reason your theme has set a height of 224 on all videos which stops this from happening.

The CSS you have provided shrinks down the player to match the small (and incorrectly sized) videos.

But I need the opposite, I need the video to grow to the full width of the conatiner, just like what the player with the black background is doing.

[ruenel]

Hey There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

[thecashbag]

Added those details to my last reply as a “Secure Note”.

[christian]

Your credentials doesn’t work. Please check.

I see your using Autoptimize, please clear all caches and deactivate it then test again. If that doesn’t help, please deactivate all third party plugins then give us the correct credentials.

X includes responsive video elements already. Please try using the video elements both available in Cornerstone and shortcode form. See http://demo.theme.co/integrity-1/shortcodes/responsive-video/ for more details.

Please note that X does neither adds width nor height to videos. It is the iframes that has a fixed size.

Also, once we get in to your site, we need to deactivate all third party plugins and might switch to the default WordPress theme so we could see the difference. If X is causing the issue, we’ll forward it to our development team but please note that we could not guarantee an immediate fix for third party plugin conflicts.

Thanks.

[thecashbag]

Sorry here are the new login details attached as a secure note.

VideoPress creates it’s own emebed shortcode. It gets automatically created when you click “Insert Video”. I need to use this normal native shortcode, not your alternate Theme X player shortcode.

I understand that it’s the iframe which is restricted, but it does not happen on the default WordPress theme Twenty Seventeen, so it must be something that Theme X is doing which is causing that problem.

I have also tried disabling plugins before but it does not work. Feel free to login and disable them again for your test, and you can also switch to the “twenty seventeen” theme to see how it should work correctly. Just please remember to reactive the same plugins and Theme X after you are finished.

[Joao]

Hi there,

Thanks for writing in! It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[thecashbag]

But this is a default WordPress plugin. It comes standard on almost all installs these days.

It works fine while using the normal Twenty Sventeen theme, but doesn’t work with Theme X. So the issue is definetly related to Theme X.

[nabeel]

Hi again,

I did some tests and found out that you need to define width and height in the shortcode to display it correctly for example, this is the shortcode I used on this test post: https://elementpaints.com/another-video-test-post/

[videopress NTKPuk7u w=1000 h=500]

Where as w is for width and h is for height. For all options please see https://en.support.wordpress.com/videopress/

Cheers