[Resolved] Video too tall

[Author]

Posts

[thibaultS]

I am trying to:
Include specific video field in my content view

Link to a page where the issue can be seen:
hidden link

I expected to see:
The video must exactly fit its size

Instead, I got:
big black areas on top and bottom of the video. The video area seems to be a square ?

[Luo Yang]

Hello,

Please elaborate the question with more details:
How do you setup the video field? with Types plugin?
How do you display the video field value? With types shortcode?

If it is a video field created with Types plugin, please follow our document to display the video field value:
https://toolset.com/documentation/customizing-sites-using-php/functions/#video
You can setup the width/height of Types video field shortcode.

I have checked the URL you mentioned above, it seems there are some custom JS codes working on your website for example:

<script>document.createElement('video');</script>

In case it is a compatibility problem, please try this:
deactivate other plugins and switch to wordpress default theme, and test again

[thibaultS]

Hi,

- I'm using a type custom-field : a video field not an embeded one. It's name is 'presentation' with multiple value (so i can add several videos to one post).
- The code i use is :
[wpv-for-each field="wpcf-presentation"]
[types field='presentation'][/types]
[/wpv-for-each]

I already tried with :
[wpv-for-each field="wpcf-presentation"]
[types field='presentation' width="50"][/types]
[/wpv-for-each]

Same result.

For the plugin i only use Toolset Layout, Map, View and Type and FooBox, WP Sync DB.

I tried out in local without FooBox and WP Sync DB and standard Theme (Twentyseventeen), Same problem with the video. The html code is as follow :
<div style="width: 50px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="video-218-1" width="50" height="320" preload="metadata" controls="controls"><source type="video/mp4" src="hidden link" /><a href="hidden link">hidden link;

<div style="width: 50px;" class="wp-video"><video class="wp-video-shortcode" id="video-218-2" width="50" height="320" preload="metadata" controls="controls"><source type="video/mp4" src="hidden link" /><a href="hidden link">hidden link;

</div>
Regards

[Luo Yang]

Thanks for the details, I have tried the steps you mentioned above in below test site:
hidden link

With similar codes as you mentioned above:
hidden link
user/pass: admin/111111

[wpv-for-each field="wpcf-presentation"]
[types field='presentation' width="200" height="200"][/types]
[/wpv-for-each]

It works fine, so it should be a compatibility problem of your website, have you tried to switch theme files?
Can you duplicate same problem in above test site?

And the JS codes createElement('video') is wordpress feature, it does not related to this issue.

[thibaultS]

Hello,

I have made some tests. This code :

[wpv-for-each field="wpcf-presentation"]
[types field='presentation'][/types]
[/wpv-for-each]

is part of a content template for the custom type 'step' and is named Step Summary.
This content template is used within a layout (named Step detail) that is a child layout of my main layout.

If i display the post (step Lee-Vining actually) without the standard layout (menu stop using layout and choosing a specific content template for this post with the same code), it works as expected (good sizes).

So the problem comes from the main layout. But i can't figure out where exactly.

[Luo Yang]

I assume you have already tried as I mentioned above, if it is not a compatibility problem, please provide a database dump file (ZIP file) of your website in below private detail box, I need to test and debug it in my localhost, thanks

[thibaultS]

Hi,

I make some more tests.

If i create a layout with only this code :

<h1>[wpv-post-title]</h1>
<p>[types field='presentation' separator=', '][/types]</p>

It works as expected.

But if i create a child layout with the SAME code, the problem appears. The layout of the parent layout contain only a child layout cell ?

Regards

[Luo Yang]

Thanks for the details, it seems to be a CSS problem, please try this in your website, edit the content template "Step detail", click "CSS Editor", add below CSS codes:

div.wp-video-shortcode, video.wp-video-shortcode{
max-height: 650px !important;
}

And test again, more help:
hidden link

[thibaultS]

It works but i can not change the video size with width or height argument. It always uses full width (when i use a child layout).

[Luo Yang]

Yes, you are right, the height and width attribute of Types shortcode for custom video field does not work insider the Layouts, I will escalate this thread to our 2nd tier supporters, currently you can try to control the width and height with CSS codes, for example:

div.wp-video-shortcode, video.wp-video-shortcode{
max-height: 450px;
max-width: 800px;
}