Solved SP Page Builder

Vertical Video Issues

Asked by Douglas B 4 years ago Last activity 1 year ago

Hello,

There seems to be an increasing need for vertical video support across different platforms. We have created vertical videos and uploaded them (to vimeo in this case) for the purpose of how they will be viewed on a mobile device. (as an example think of how you watch youtube shorts or instagram videos on a mobile device).

I cannot use joomshapers video addon as it doesnt allow for a button such as 'Preview' to click to watch the video preview. So I have tried modal popup addon which is more in line with that.

However, even though vimeo respects the flipped aspect ratio of 9:16, the joomshaper modal popup does not and forces it into a standard 16:9 video box. Maybe i am missing a 'switch', i have certainly been known to do that, but if not, can you please instruct me on how to place a vertical video without forcing it into a standard 16:9 box.

Thank you very much for your help.

Accepted answer

Marked as the solution

Douglas B Asked this

4 years ago

Hello Paul,

Thank you for this update, i was actually wondering if it could be scaled up. That is very helpful.
Thank you sir, I will try and tweak the placement a bit as it pops up low and on the left, but this is really heading in the right direction. I appreciate your help.

@media (max-width: 580px) {
.mfp-iframe-scaler iframe {height: 300%;}
}
.mfp-iframe-scaler iframe {width: auto !important; box-shadow: none; background: transparent; }
.mfp-close-btn-in .mfp-content .mfp-close { font-size: 44px; right: 50%; }

19 more replies

Toufiq Senior Staff

4 years ago

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Tired to find out the "preview" button. But, There is no "preview" button found. Can you help me find out the "preview" button?

-Thanks

Douglas B Asked this

4 years ago

yes, sorry, please take a look again. Thank you sir.

Paul Frankowski Senior Staff

4 years ago

Douglas, If I may....

YouTube Shorts (Vertical) videos will be supported in one of the upcoming updates for Video addon.
But indeed we forgot about Modal addon, maybe becuase so far all users used horizontal/classic videos.

So I guess, right now it request using custom CSS to fix it.

On which subpage you have that video or where I should click to see it?

Douglas B Asked this

4 years ago · edited

Hello Paul,

I like and use the video addon, and as you have mentioned, normal horizontal videos are what we predominately use. Also, how the video addon functions showing the video thumbnail prior to playing it is great, love it.

But I have been asked to create some vertical videos for the front page especially for mobile visitors. For desktop users, there is less of a point to using a vertical video in my opinion.

In my case, it makes sense to use a button to activate the video as showing the video thumbnail would take up too much space (especially if it was a proper vertical video). That is why i chose the modal addon, as it allows you to choose other options instead of the standard thumbnail.

I am glad to hear this feature is coming in upcoming updates, thank you. Hopefully you can implement it into modal addon at the same time.

Thank you for your help, and have a great day.

Paul Frankowski Senior Staff

4 years ago

On that page, use extra Custom CSS line

.mfp-iframe-scaler iframe {width: auto !important; }
.mfp-close-btn-in .mfp-content .mfp-close { font-size: 44px; right: 50%; }

Should be better by now.

Douglas B Asked this

4 years ago

Hello Paul,

Thank you for your reply. With the iframe scaler code it looks like this on a mobile device:

Is there a further tweak that i can make to remove the black bars as mobile is where I would use a vertical video?

Thank you again for helping me out with this issue. I greatly appreciate it.

Paul Frankowski Senior Staff

4 years ago · edited

About 2nd question

update my code 1st line to:

  .mfp-iframe-scaler iframe { width: auto !important;
  box-shadow: none;   background: transparent; }

Paul Frankowski Senior Staff

4 years ago

About 1st question, this CSS Zoom hack my help for Mobile devices

@media (max-width: 580px) {
.mfp-iframe-scaler iframe {height: 200%;}
}

You can play with % value, as well.

Paul Frankowski Senior Staff

4 years ago

After all those "simple" 4 lines made a big improvment in video view.

I am glad that I could help also this time. I know ... McGyver style ;)

Douglas B Asked this

4 years ago

Well i certainly could not have done that myself, and i'm sure it was not as simple as it looked. Thank you Paul, have a great day today.

Nuria Sanchez

2 years ago

Well, a year has past and still the Video add on does not work to display vertical videos/stories. Can you please advice how can I get a vertical video to use the whole area, just like a photo it does?
Thanks.

PS
I have tried to upload a photo here (and in previous posts), and it seems not to be working. I already tried it using two different browsers, and nothing. Please fix that functionality, once it is easier to show the issue graphically.

Paul Frankowski Senior Staff

2 years ago

But .... During that period we added Youtube Shorts support.

Nuria Sanchez

2 years ago

Oh good. How can I use that? Can you give me step by step directions? Thanks!!!!!

Paul Frankowski Senior Staff

2 years ago · edited

My video: https://www.youtube.com/watch?v=gGqcAQGuGrg

this same you can do using back-end editor in SPPB Pro 5.x.

Nuria Sanchez

2 years ago

Thanks Paul. I did what you said but the video I have is not in YouTube; it is an MP4 stored in a folder inside Media.
Is there a way to make the video window 9:16 and contain my locally hosted video and make it display correctly in 9:16 format? (using the whole area).
I trully appreiate your help here!

Paul Frankowski Senior Staff

2 years ago

Have you tried CSS shared by Douglas and Me a year ago.

Nuria Sanchez

2 years ago

Yes, and it didn't affect the way the video is displaying at all.

Since uploading an image here is not working, below is the link to my website (still in progress). Please scroll down to see the videos section: under Kitchen Gallery/ Explore our Food you'll see 4 vertical 'photos'. The second video shows what I was able to see after applying what you showed in your video; but the first one is showing my local mp4 video, and you can see that it is still showing the small horizontal format instead of filling the whole vertical area:
http://carnitasytortasguadalajaralv.com

Please help!!

Paul Frankowski Senior Staff

2 years ago

Is what I see on Desktop Screen | Firefox | Windows. The first left video is totally OK - 100% Vertical.

Screenshot 2024-08-18 at 11-59-37 Home.png

Remember that you can always use Raw HTML addon and HTML5 player code with custom styles.

Nuria Sanchez

2 years ago

Hi Paul,
By the time that you saw my site I had already applied some code that Cristian, in a different chat, shared with me, and did what I was looking for.

This is the code that worked:
.sppb-addon-video-local-source { position: relative; }
.sppb-addon-video .sppb-addon-video-local-video-wrap { padding-top: 0%; position: relative; line-height: 0px; }

I leave it here in case it helps somebody else.
Thanks for your attention!!

PS: how were you able to place a photo in the post? I have tried in Chrome and Firefox and it doesn't work, just see this code ![] and the the htpp protocol...

Nuria Sanchez

2 years ago

Excellent!! I am sure that more than one user will be thankful.

Oh, OK. I thought the poblem was on my end.
Thank you again!!

Paul Frankowski Senior Staff

2 years ago · edited

Great news.
I will ask our team to use it as well in SPPB update. Thanks for CSS :))))
About year ago we disabled image upload feature for forum users. Now you have to share link to image (your hosting or Free Image hosting)

Nils Heitmann

1 year ago

Hi, it is still not integrated !

I suggest 2 options: horizontal / vertical, when choosed different classes and CSS apply.
It`s not that hard.