-
Posts
-
Hi support
in my https://www.comunicareaigiovani.it/ in mobile versione my video uploaded in home page in some devices is perfect while in others I see bad black vertical stripes to fit orizontally the screen can you help me please?
It is as a background-video in color section, minimum width=400px
The video is 360px x 360px
Tks GianlucaHey Gianluca,
Thank you for the inquiry.
You can include the following CSS code to resize the video for smaller devices, but please note that this might result in certain parts of the video being cut off.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #av_section_2 .av-section-video-bg iframe, #top #av_section_2 .av-section-video-bg embed, #top #av_section_2 .av-section-video-bg object, #top #av_section_2 .av-section-video-bg video { object-fit: cover; } }Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.
Best regards,
IsmaelI tried but now is not visible correctly from any mobile device as you can see.
Please let me know
Tks
G.Hi,
Try this CSS instead in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { #top #av_section_2 .av-section-video-bg iframe, #top #av_section_2 .av-section-video-bg embed, #top #av_section_2 .av-section-video-bg object, #top #av_section_2 .av-section-video-bg video { object-fit: scale-down; background-color: #fff; } }After applying the css, please clear your browser cache and check.
This is the expected results:
Best regards,
Mike
- You must be logged in to reply to this topic.