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

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

Douglas, If I may....

1. YouTube Shorts (Vertical) videos will be supported in one of the upcoming updates for Video addon.
2. 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?

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.

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.

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.

About 2nd question

update my code 1st line to:

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

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.

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 ;)

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.

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.

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

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

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

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!

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!!

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

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

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...

1. Great news.
2. I will ask our team to use it as well in SPPB update. Thanks for CSS :))))
3. 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)

Hi, it is still not integrated !

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