and did you find a solution for it?
regards,
Background Video (YT) is not working at all on iPhone!
Any help?
KC
(@benxy20gylinxu)
I have similar problem as ZenBen, background video for section does not work in Android/Google Chrome browser/Cheetah mobile browser, any update about the issue?
-
This reply was modified 6 years, 4 months ago by
KC.
Hi KC,
I’ve read somewhere that background video is not made for mobile devices in general, because of bandwidth and the small display sizes. Elementor has a “fallback picture” option, that way you can set a background image only for mobile devices instead of the video.
Regards,
Ben
KC
(@benxy20gylinxu)
@zenben I tried to double checked with Elementor YouTube account since they pay more attention there…, it is true that it does not work in mobile device. Just so you know.
-
This reply was modified 6 years, 4 months ago by KC. Reason: correct typo
@benxy20gylinxu
Thanks pal! ^‿^
Adding the below css to style.css of a !Child Theme! seems to have fixed the alignment issue for me, now all section background videos are centered on x and y axis when set to “Fit To Screen”. The devs used similar code, but only for the y axis, probably because it breaks some other layout so— (WARNING: this has NOT been tested with video background layouts other than “Fit To Screen” and may break alignment for background video layouts other than “Fit To Screen”)
If your theme supports it, you can target only certain pages by adding .body.page-name tag before the other tag (where the page-name is the name of the page you are targeting) this way it will only affect that particular page.
.elementor-background-video-embed {
top: 50% !important;
left: 50% !important;
-webkit-transform: translate(-50%,-50%) !important;
-ms-transform: translate(-50%,-50%) !important;
transform: translate(-50%,-50%) !important;
}
Thanks for your bit @strider2704, I added a little to your code and finally got what I wanted.
Added this bit to increase the height of the video:
.section-video iframe{
width: 100% !important;
height: 215px !important;
}
to get the desired size of the video.
I found it easier to just show the hidden section using this CSS:
.elementor-hidden-phone {
display: block !important;
}
(default is display:none;)
use at your own risk, not tested thoroughly…
@lukascech
Where did you put this code?? Thanks, I really need to solve this issue!
@giovanni-alberto-crestani not sure now, but general rule is:
– if you put it into a general CSS file that loads with the entire website (I use Simple CSS plugin for that), it will work fine – but it might impact things on other pages too
– you can put it into the custom CSS section of the elementor widget itself – this way it will impact only the specific page (Advanced tab)
The @lukascech solution worked for me. Thanks
.elementor-hidden-phone {
display: block !important;
}
