Adjust Size Of Video
Peter Spiegelenburg
Hello,
working on this website, and I have been trying to display the video in the original format. But I can't find how to do it.
What I want is to show the video in the original dimension: width:641px, height: 966px The grey background is the correct size for the video. Is this only possible with a html add on, or should it also be possible with the video add on?
Regards, Peter
Rashida Rahman
Accepted AnswerHi there!
Thanks for your query.
Did you mean this video? https://prnt.sc/26xtgoq
Then you can use the following code in your custom CSS to get it that tall as your column:
#sppb-addon-1645097871383 .sppb-video-block.sppb-embed-responsive.sppb-embed-responsive-16by9 {
height: 966px;
width: 641px;
}Hope this will give you your desired dimention!
Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Best Regards
Christian
Accepted AnswerHello team, I have a video (mp4, local file, NO Vimeo or YouTube) that is in 9:16 format. I would like to display it in the same format. But the video module always forces the 9:16 video to a 16:9 format.
Unfortunately, the code snippet mentioned here does not work if I add it to the custom CSS.
How can I display my video correctly in 9:16 format using CSS code? Or is there another way than CSS?
Regards, Chris
Version PB: 5.3.2
Nuria Sanchez
Accepted AnswerI am looking for the same answer Christian posted above. Anybody?? Christian, if you found the solution, would you share? Thanks!
Christian
Accepted AnswerHello Nuria,
of course, I'll share the solution with you.
When you are in the PB editor and have inserted your video, go to the Style tab and at the bottom to the area where you can enter your own code for the CSS.
Then copy the following code into it:
.sppb-addon-video-local-source { position: relative; }
.sppb-addon-video .sppb-addon-video-local-video-wrap { padding-top: 0%; position: relative; line-height: 0px; }
Your video will then be displayed upright in 9:16 according to the column width. Here you can see what this looks like: https://kooikerhondje-dck.de/wanderungen-im-dck/kooikerspaziergang-im-oberharz
Maybe you can send a link to see what it looks like in your case and whether it worked.
Best regards Christian
Nuria Sanchez
Accepted AnswerOh! Thank you very much for responding!!
CHRISTIAN, YOU ARE A GENIOUS!!!!!!! It worked!!!
This is the link of my WIP site, if you still want to check it out. Scrll down to Kitchen Gallery/ Explore our Food and the first video is now showing your CSS.... YAY!!!!!!! http://carnitasytortasguadalajaralv.com
Nuria Sanchez
Accepted AnswerSince you are so nice and so smart, maybe you have the answer for another thing.
One option of the Add-On IMAGE LAYOUT display a photo on the left and the text on the right. Do you know how to invert the order to have first text then the photo?
If you see the URL i sent above, below the Hero Video I have three sections with photo/text, but I want the one in the middle to be inverted so they are not all running on the same direction. Does my question make sense?
Christian
Accepted AnswerPlease try it out to see if it works:
Go to the first AddOn of the ImageLayout. Underneath you will find “Order of the image on the desktop”.
Enter a 1 for Select. Enter a 2 for the second and a 3 for the third.
In my case, the image then jumps to the right-hand side and the text is on the left. Try it out to see if it works for you.
Nuria Sanchez
Accepted AnswerDU BIST TOLL!! (I'm studying German : )
Your concept nailed it, I just ended up using this sequence to make it display as I wanted: FIRST ADD ON Image order 1 Content order 2 SECOND ADD ON Image order 4 Content order 3 THIRD ADD ON Image order 5 Content order 6
DANKE!!!!
Christian
Accepted AnswerHello Nuria! Great that it works. I took a look at it and it looks great. Well done!
Nuria Sanchez
Accepted AnswerThanks to you, Cristian!!! ; )
Did you see my comment about the vertical video not working in Chrome? Any ideas??
Nuria Sanchez
Accepted AnswerCristian.....I need your help again....actually, on two things ; )
1 on that Add On were we move the photo to the right, the photo doesn't flow all the way to the end of the screen, it's showing some padding-right, but I already checked all the elements and don't find that, not even using the BROWSER INSPECTOR. Any ideas??
2 Another thing that is not responding to me is line-height nor the padding/margin between elements. I like my headlines and subheadlines very close to each other vertically; I cero-ed out all padding and margins and the elements are still separated from each other, as you can see on the two lines of text that's over the hero video, and the button below. If you scroll a little, you'll see the H1 CARNITAS Y TORTAS.... the subheadline is closer (as I like it) because I played with negative margin-top but I don't want to do that, I prefer to work around padding. Am I making sense? If so, would you have a suggestion to close that vertical space? (I'm getting on the impression that SPPB 5 is buggy...)
Christian
Accepted AnswerHello Nuria,
PageBuider is a very good tool. Even if some things annoy me a lot and there are still a few bugs, it's a good tool to work with. But some things just don't work, no matter what you do.
I've looked at everything and I think I understand what you mean with your two questions.
I am not part of the JoomShaper support team, but I would ask if I could have access to Joomla/Pagebuilder. Then I could take a look at it. It's quicker than writing a lot.
If you trust me, then create a new user with admin rights. Assign a username and password and send it to me via “Hidden content”. Then I'll take a look at the page.
If not, we can only make progress with the solution bit by bit, and it will take time, especially as the time difference is very large.
Nuria Sanchez
Accepted AnswerI love SPPB, have been using it for years now, but I was pretty proficient on version 4, then a lot of things on version 5 has taken me 'by surprise' ; )
I trust you! If I put the credentials on the hidden box below this comment only you will see it? Have never used that box ; )
And THANK YOU for offering your help!!!!!
Nuria Sanchez
Accepted AnswerLOL It is absolutely delicious!! Come to Las Vegas and I take you ; )
I am planing on having a few of those short stories to show how they make those deliciousness. I think it's going to be great for the website.
Nuria Sanchez
Accepted AnswerTHANK YOU!!!!
Christian
Accepted AnswerBut it will be a long way when I come to Las Vegas from Germany. But thanks for the offer. That's really sweet of you, and I feel honored.
If you're going to write stories there, I'm sure it will inspire people.
Paul Frankowski
Accepted Answer@Christian
I saw happy smile on Nuria face on a different topic, so I came here to to say BIG THANK YOU for extra CSS Tip.
I will try convince our team to add such a switch in Video addon that will use that CSS, if you don't mind.
@Nuria, I agree that using your own files is better than YouTube becuase no advertising in the middle of clip. And not all users have Ads blocker :/
What was in Las Vegas stays in Las Vegas ;))))
Nuria Sanchez
Accepted AnswerThanks Paul for joining this post ; )
I just noticed one thing. The video is displaying perfectly in Firefox and Safari, but not in Chrome. Any ideas?
Christian
Accepted AnswerHello Paul,
I don't want to adorn myself with other people's feathers. The honor of the code goes to “Yofie Setiawan”, who posted this 3 years ago (https://www.joomshaper.com/forum/question/38?order=newest).
I'm sure you're allowed to use the code as it's public. But feel free to ask him again. It would be great if it were integrated into PB.
Best regards Christian