Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #999159

    When using a video as a color section background, it is not possible to click to pause a video. Also, as the size of the browser window decreases the video height remains the same, and the sides of the video are cut off. For example: https://newsblocks.io/home

    On the other hand, if I add the video as a slide in Easy Slider or the Full-Screen Slider, I can get the video to pause with a click, BUT when I reduce the size of the window the entire video becomes small (because the video height is reduced): Example: https://newsblocks.io/background-video-test/

    The ideal would be to combine the resizing behaviour of the color sectiion with the ability to pause the video with a click. Is there 1) a way to click on background videos to pause them and 2) a way to make the resizing of video sliders act the same way as color section background videos?

    #999266

    Hey sparkzilla,

    A background video is not meant to have any controls. So you might want to stick with the slider.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #999407

    Hi Victoria, I have tried to use the slider, but as explained above the resizing behaviour is not the same as when video is used on a color background. Please advise how to fix the resizing issue.

    #999452

    Hi sparkzilla,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      #full_slider_1, 
      #full_slider_1 .av_slideshow_full.avia-slideshow,
      #full_slider_1  .avia-slideshow-inner,
      #full_slider_1 .avia-slideshow li,
      #full_slider_1 .avia-slideshow li img {
        min-height: 220px;
      }
      #full_slider_1 .avia-slideshow li img {
        width: 140%;
      }
      .slideshow_inner_caption {
          height: 36%;
          top: 10%;
      }
      #top .avia-slideshow-button.avia-color-light {
          padding: 3px 6px;
          margin-top: 5px;
      }
      #top #wrap_all .avia-slideshow-button {
          font-size: 14px;
          line-height: 1.3em;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #999484

    The code works, but when I compare I don’t think the behaviour is the same as the color section. Perhaps a work around would be to increase the min height to 430px, but when I do that the slide has black bars on the top and bottom. Please advise.

    #999736

    Hi sparkzilla,

    I tried to make it taller, but the video does not scale appropriately, it does not go beyond the viewpoint like the image does if the width is increased.

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.