Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1410781

    Hi support
    in my 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 Gianluca


    Hey 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,


    I tried but now is not visible correctly from any mobile device as you can see.
    Please let me know


    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,

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.