From what I've read you can only do 16:9 video but what happens if I need the video to be 9:16 since the content needs to be vertical for mobile. What can I do?
Hi Tahir! How can I make sure my video always shows correctly on mobile (portrait) no matter the phone?
So it looks like you can do more than just 16:9. I tried a 1024X1024 square video and that worked. Does it have to be a power of two or screen ratio (32:9, 21:9, 16:9, 16:10, 4:3)? I tried 1124X2436 and that doesn't show up.
A) I've noticed in the Row Settings > Background. The background image has a lot more options for where you want the image to be place with the "Background Position" option. If I want my video to be Center Bottom how can I go about doing that?
B) Is there code that pushes the video size out a little past 100%? It seems some of the video is being cut off both top and bottom
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) {
.wpb_row .nectar-video-wrap video {
right: 0px;
}
}
.wpb_row .nectar-video-wrap video {
bottom: 0px;
position: absolute;
}
For mobile the video looks great! The video pinned to the bottom right for desktop looks way better now I just need the top of the video to be in full view ( scale but be proportional) and not being hid by the overflow. Can that be done?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) {
.wpb_row .nectar-video-wrap video {
height: 100% !important;
}
}
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) {
.wpb_row .nectar-video-wrap video {
height: 100%!important;
object-position: left !important;
}
}
From what I've read you can only do 16:9 video but what happens if I need the video to be 9:16 since the content needs to be vertical for mobile. What can I do?
Hey Again,
We can try using a CSS transform to rotate the Video.
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Hi Tahir! How can I make sure my video always shows correctly on mobile (portrait) no matter the phone?
So it looks like you can do more than just 16:9. I tried a 1024X1024 square video and that worked. Does it have to be a power of two or screen ratio (32:9, 21:9, 16:9, 16:10, 4:3)? I tried 1124X2436 and that doesn't show up.
A) I've noticed in the Row Settings > Background. The background image has a lot more options for where you want the image to be place with the "Background Position" option. If I want my video to be Center Bottom how can I go about doing that?
B) Is there code that pushes the video size out a little past 100%? It seems some of the video is being cut off both top and bottom
Hi Guru,
A. For the video to be bottom center it would have to be done using css so that we can attain the position you would want for the video.
B. Please send in your website url so that we can check out on the videos that are being cut.
Thanks.
Hey Again,
Please provide a live demo url that replicates the row background structure so we can write up the custom CSS for aligning the video.
Thanks
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) { .wpb_row .nectar-video-wrap video { right: 0px; } } .wpb_row .nectar-video-wrap video { bottom: 0px; position: absolute; }Thanks
ThemeNectar Support Team
I have a quick question about mobile.
1) Will a video show up if the user is off wifi?
2) Does the video have to be 32:9, 21:9, 16:9, 16:10, 4:3 to show up or could I use a 1024X1024 video?
Hey Again,
1. This depends on their mobile settings.
2. IOs works best with 16:9 ratio .
Thanks
ThemeNectar Support Team
For mobile the video looks great! The video pinned to the bottom right for desktop looks way better now I just need the top of the video to be in full view ( scale but be proportional) and not being hid by the overflow. Can that be done?
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) { .wpb_row .nectar-video-wrap video { height: 100% !important; } }Thanks
ThemeNectar Support Team
It looks like at a viewing resolution of 1366 X 768 there is a gap on the right (white space)? I thought with the following:
@media only screen and (min-width: 1000px) { .wpb_row .nectar-video-wrap video { right: 0px !important; } }That would always pin the video to the bottom right?
Hi Guru,
Please share a screenshot so that we can get to see what you are getting from your end as we are not able to replicate this at the moment.
Thanks.
Looks like the video is in the center, for desktop I need it pinned to the right. Mobile is good being in the center
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1000px) { .wpb_row .nectar-video-wrap video { height: 100%!important; object-position: left !important; } }Thanks
ThemeNectar Support Team