Embed video height

Support
#1

I am trying to get an embedded video to look like this site: https://frontofficerocks.com
Here is the link to the site I am working on: http://test.amplifieddynamics.com
I will provide login credentials below in a secure note.

Basically, I want the video to be a fixed height when it is past a certain screen resolution (as shown in the first link)
When the screen size reduces to a certain point, I want it respond accordingly (also as the first link).
The video on the second link is too large (height-wise). I want it full width, just not taking up so much space height - wise, if that makes sense.

Thx in advance.

#2

Hi There,

Please add the background video for your section instead of using the embed video element.

Then you can control the height of video by adjust the top & bottom padding of section:

Regards!

#3

Thank you for your response!
Almost there.
When I resize the browser, the video stays the same.
It is not responsive when I resize.
I need it to behave like the video in the first link.
Help … ?

#4

Hello @XSO,

Instead of using a fixed number of pixels, you may use percentage instead. Adding like 30% or depending on your desired setting. Having it this way, the height will vary depending on the browser height unlike the fixed pixel where in it will always be the exact number of pixels in different screen sizes.

Hope this helps.

#5

Thank for the suggestion. I have tried using 25%.
However, it cuts off the top and bottom of the video (centers it …?).
Also, when I shrink the browser to mobile size, the video is smaller (unlike the first link I shared where the video actually gets larger).

Please view the first link and see how it is responsive and maintains a larger viewable video image.
That is the effect I am trying to achieve.

If possible, would you please make the necessary changes to my site (login credentials were provided in a secure note in the first post).
I will then review what you have done and know how to accomplish it again in the future.

Thank you so much.

#6

Hi @XSO,

The video in your ideal site isn’t achievable with just a video element. The one in that site isn’t just a simple video element. You’re trying to achieve different video sizes for each breakpoints and that setup isn’t applicable or not available for theme’s section background or video element.

I recommend using Revolution Slider for that one and add your video as background. With slider, you could create different sizes to your liking. Please check this https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/, https://themes.zone/docs/how-to-make-slider-revolution-responsive/

And we can’t apply any changes to users site especially if it’s related to customization or content creation, unless required for troubleshooting an issue.

Thanks!

#7

@Rad
Thx for the info
I will try to do that now
Will keep you posted

—EDIT—

After using Rev Slider, it works pretty well.
My only issue is that I want the slider to always show from the top of the video (rather than centered vertically).
I have searched Rev slider site for help on how to do this (just can’t find it).
You were a great help and I am ALMOST there (just need the vid to stay aligned to the top)
See vid in link one for example (it is narrow when full screen and then gets larger when smaller. That’s what I am trying to achieve).

Thx again @Rad

#8

Hi @XSO,

Seems to be okay with my view, and it’s not possible to change the background video’s position. Have you tried adding it has video layer? You can set it’s set to cover to make it work as a background, then just use the X and Y positioning for reach device view to position it negative to the top.

Thanks!

#9

@Rad

Thx for the advice.
I have tried what you suggested but have had no luck.
Please see the attached screenshots
One at a large browser resolution and the other at a smaller resolution.
As you can see, it is not aligning properly even though I set everything correctly (I think).
Can you please take a look and correct whatever I may have done incorrectly?

I am trying my best to do this myself (following your instructions, but it doesn’t appear to be working)
I am sure that it is just some simple oversight on my part.

Thank you for your help and look forward to your response.

[Album] Imgur

#10

Hey @XSO,

Regretfully, following @Rad’s suggestion, you won’t be able to reposition the video layer either so what I’d recommend for your video to not get cropped is you increase height if your slider’s grid size. Please see https://youtu.be/XfObndmK02M and https://youtu.be/XJ5j646NQGg

The background video position both in Slider Revolution and in Pro are the same and both does not have an option to reposition because that is not the point of the background video. You use a background as a decoration and not to provide an important information.

If you need to show an important information that is inside your video, you should not use Full Cover or don’t use it as a background in general. For that case, use a Video element instead.

I hope you understand the limitations and the reason behind it.

Thanks.

#11

@christian_y

Thank you for your very detailed responses (especially the video(s))
You explained it and the limitations very well and I understood exactly what you were explaining.

I guess my only issue is that the first link in my OP, positions the video correctly (so the top is not cut off) and all of the explanations I have been given here (so far) have not been able to successfully re-create the desired effect.

I don’t think that achieving the result of the video in the first post should be so difficult …

Maybe there is some simple CSS code that I could include for this video to ensure the correct positioning (i.e. !important or absolute or something)
If the first link was able to achieve it, I think that it should not be too difficult …?

Once again, thank you for your extremely detailed response and I look forward to your next response.

#12

Hey @XSO,

That of course is technically possible using custom CSS. That is however outside the scope of our support as it requires custom work. I’ll show you an idea but we will not be supporting issues that will arise from the use of the guide and we’ll also not provide further enhancements. Please see https://youtu.be/ovU86LoufVo and https://youtu.be/GG8SnVw8l9Q

Below is the CSS in that guide.

@media (min-width:1025px) {
.fullscreenvideo.tp-videolayer {
      height: 975px !important;
    }
    .fullcoveredvideo video {
    top: -15% !important;
      }
  }

Hope that helps and thank you for understanding.

1 Like
#13

@christian_y

Words cannot begin to express my gratitude!
You have truly gone above and beyond for me.
This is EXACTLY what I was looking for!!!

You made it look so easy.
I am using this code and totally understand that this well beyond the scope of support.

Nonetheless, you have made this customer very pleased with your level of support.

Thank you again for all of your hard work.
It is greatly appreciated.

#14

You’re most welcome :slight_smile:

#15

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