Video in portrait mode

Support
#1

Hi.

I want to show a video in portrait mode. But it ends up showing very small. It doesn’t fill out the module. I guess I’m missing out some styling.

Could you please take a look at it?

I’ve set up a testpage here; https://brubakkenhome.no/testpage/. The column is 1/3.

And I’m using the code;
[x_video_player m4v=“https://www.brubakkenhome.no/wp-content/uploads/2018/11/uttrekk-runde-spisebord-brubakken-home.mp4” poster=“https://www.brubakkenhome.no/wp-content/uploads/2018/11/poster-uttrekk-runde-spisebord.png” no_container=“true”]

Regards Christian

#2

Hi Christian,

Try adding a class to your video player shortcode

eg.

[x_video_player class="my_video" m4v="https://www.brubakkenhome.no/wp-content/uploads/2018/11/uttrekk-runde-spisebord-brubakken-home.mp4" poster="https://www.brubakkenhome.no/wp-content/uploads/2018/11/poster-uttrekk-runde-spisebord.png" no_container="true"]

Then add this in Theme Options > CSS

.my_video .x-video-inner {
      max-width: 420px;
      width: 100%;
}

Hope that helps

#3

Hi.

Thanks for your quick reply!

But unfortunately adding your code didn’t make any difference.

Regards Christian

#4

Hi Christian,

I recommend editing the video directly, the aspect ratio of the video will never match the landscape aspect ratio. I also tried other CSS and it’s not gonna crop the video, it will just change into different size while still in portrait mode.

Thanks!

#5

Hi again.

If I understand you correctly – I want the video to be in portrait mode. But it doesn’t fill out the column. I hope that is possible to acchieve.

Regards Christian.

#6

Hey Christian,

That will require custom CSS using the Video Player shortcode because it does not support portrait aspect ratio. See http://demo.theme.co/integrity-1/shortcodes/responsive-video/

Since you’re using Cornerstone, I’d recommend that you use the Video element as you can set a custom Content Aspect Ratio. Please watch this quick screencast: https://youtu.be/OR6-b4N1BKE

If you wish to stick with the shortcode, you will need to follow Paul’s suggestion but replace the code with this:

.my_video .x-video-inner {
      padding-bottom: 124.25% !important;
}

Please just note that custom coding is outside the scope of our support. That was just meant to provide an idea to extend the shortcode’s display.

Thanks.

#7

Thanks!

I’ll look into it.

Regards Christian.

#8

Let us know how it goes!

#9

Hi again.

This is a bit strange. Please look at the attached screenshot. I’m missing some of the options as seen in the screencast you made for me. For instance the video type “Embed” and “Player” is not showing up. I’m using the video element.

And when adjusting the aspect ratio nothing happens.

Any ideas?..

Regards Christian.

#10

Hi Christian,

You need to enable Advanced Option for that option to appear.

With regards to aspect ratio, you need to make sure that it’s the same as your video aspect ratio or it will not work.

I can also see that you have added it in the embed, it will not work since it’s a direct link to your video file. Please add it in Player Source.

For more info kindly refer to the link below

Thanks

#11

Hi again.

Thanks a lot for your effort. Now it works perfect :slight_smile:

Regards Christian

#12

Glad to hear that. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.