Hello, I am having trouble with simply having a vertical video put on my site. The resolution of this video is 1080x1920; it is taller than it is wide. When I go to add section and search for video, my only options are video, video background, and video with text. I don’t want a video background, and when I put in just a video I cant adjust the size or positioning, and while it does show the video in it’s full resolution it’s useless when it’s that big on the browser, and when you click fullscreen you only get a low resolution landscape slice of the midsection of the vertical video (see second screenshot). This happens when I click fullscreen in both the video and video with text sections.
SO to summarize, I would like to make the video with text section actually show the vertical video, in about the height that would take up the page on a browser (see first screenshot), and when you click fullscreen on it actually show the whole video in vertical format.
I didn’t think Dawn had a video with text section? Anyway, try add this CSS into your theme settings > custom CSS but note, the video will get a lot smaller as it’s height depends on the height of the section. So to increase the height, try adding more text on the left or empty blanks spaces.
.image-with-text-template--19207714603265__ss_video_with_text_8F7EQQ__media-item.grid__item{max-width:100%!important;width:auto!important;flex-grow:0!important;}.image-with-text-template--19207714603265__ss_video_with_text_8F7EQQ__grid--reverse{grid-auto-columns:auto!important;min-width:0!important;}
Hope that helps.
Hmm you’re right I think I might have added it from the section store. Regardless, your code did help in making the video longer but now it’s smaller as well. I can get it to be longer, but the width of the text box area seems to be preventing the video from getting any wider as well. Please see attached. Any ideas to fix that?
Hi @cunningham3131 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media screen and (min-width: 750px) {
.image-with-text-template--19207714603265__ss_video_with_text_8F7EQQ__media--small {
height: 70.4rem !important;
}
}
That worked! But when I hit fullscreen, that video still shows a landscape slice of the vertical video. Any idea on how to fix that?
