[Resolved] Row Width Not followed and Video Appears bad on mobiles

[Author]

Posts

[AtefR7377]

Hi,
I am building a "sermons" custom post type, where I can show lectures from youtube, followed by an audio player.

the only way I got the youtube videos to display properly, is by creating a custom field of type "embeded media" and past the youtube url in it.

I created a layout for this, and shows the number of cells to be 8. So i left 2 cells both sides (Please refer to image 04.jpg)

However, in the front end, the video shows the full width of the row. please refer to image 03.jpg.

Same for the audio player, so it is not a youtube related issue.

I verified that the visual editor cell is full width by wrapping the code with a div tag and giving it a red background. (plz check image 03.jpg) the red color shows full width.

I have my row width equal the post content (the default recommended setting). so the video should show smaller than the content width by 2 cells each side.

My second Problem is that the video shows alright on desktop (although huge because it is full width).
However, on mobile it looks very ugly.

it shows the full screen vertically (refer to image 05.jpg), and when it plays, the whole screen turns black, with the middle part showing the video. (please refer to image 06.jpg)

I tried adding height value, or width value, or both, when i insert the custom field, but none had any effect. it still shows full width on desktop, and ugly on mobile.

here is the test page i created:
hidden link

can you please help me reaching to a more presentable layout?

thanks a lot

[Luo Yang]

Hello,

The Layouts plugin is based on Bootstap framework, you will need to load the Bootstap CSS/JS file in your website, please try this:
Dashboard-> Toolset-> Settings-> General
in section "Bootstrap loading", choose option "Toolset should load Bootstrap 3.0", and test again

Both issues you mentioned above should be able to be fixed.

[AtefR7377]

Hi Luo,
Thanks for the reply.

Yes, the Bootstrap was accidentally turned off as I was testing something else.

Now the elements show narrower than the content width.

However, the video player still shows huge. it looks awful on a 15 inch screen, and on mobile phones. it is not responsive at all.

I have pasted the video code twice now in the test page. one without specifying height, and one with 300 px height like this:

[types field='sermons-video-field' height='300px'][/types]

and I tried removing the "px" too:

[types field='sermons-video-field' height='300'][/types]

the videos still show huge.
and when I inspect the video, I can see an iframe with 1200px wide x 708px high. so it is clearly not following the height.

can you please check again?
here is the test page:
hidden link

Thanks

[Luo Yang]

It is abnormal, in case it is a compatibility problem, please try this:
1) deactivate other plugins and switch to wordpress default theme, and test again
2) If the problem still persists, please provide a database dump file (ZIP file) of your website in below private detail box, also point out the problem page URL, I need to test and debug it in my localhost, thanks

[Luo Yang]

I can get the credentials of your website in your another thread:
https://toolset.com/forums/topic/problems-when-using-the-post-title-shortcode-inside-a-view-shortcode

I have tested the same settings in a fresh wordpress installation with only Toolset plugins, the shortcode works fine:
[types field='sermons-video-field' height='300'][/types]

see the live result here:
hidden link

So the problem in your website should be a compatibility problem or a server problem, please try as I suggest above:
1) deactivate other plugins and switch to wordpress default theme, and test again
2) If the problem is fixed, activate other plugins one by one, try to locate the problem plugin/theme