Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 8, 2022 at 12:16 pm #1364317
    jamesbarrell

    Hi,

    I’m trying to add a background image inside a grid that has a 1/1 layout block inside.

    So like on your new demo (parallax demo) you have the first grid block that is split into 2. Then inside the right section you have a background image – I want this image to be a video.

    I have tried to add a video on the 1/1 column > styling > background > insert image. Whilst it isn’t actually designed to add a video this way it does kind of work (on older browsers that don’t seem to enforce autoplay I think). BUT is there a way to actually add a background video to a layout element (column)?

    I can see it’s possible to add a background video to a “Colour section” but this is no good as you can’t split a colour section into half. Neither can a colour section be dropped inside the right half of a grid…

    Any suggestions for how to add a video inside a 1/1 column that is inside the right side of the grid? I want it so the video covers the whole half of the grid. So it’s also no good adding the video simply using the add video button from the media elements tab…

    September 9, 2022 at 8:41 am #1364400
    Ismael

    Hey James Barrell,

    Thank you for the inquiry.

    This is still possible with the Grid Row element and a Video element. Edit the cell containing the video element, apply a custom css class name to it (e.g “av-with-video”), then add this css code to resize the cell and expand the video in order to cover the cell completely.

    
.flex_cell.av-with-video {
  padding: 0;
}

.flex_cell.av-with-video .flex_cell_inner {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.flex_cell.av-with-video .flex_cell_inner .avia-video, .flex_cell.av-with-video .flex_cell_inner .avia-video .avia-iframe-wrap {
  width: 100%;
  height: 100%;
  display: block;
}

.flex_cell.av-with-video .flex_cell_inner .avia-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.flex_cell.av-with-video .flex_cell_inner .avia-video .avia-iframe-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

    Best regards,
    Ismael

    September 9, 2022 at 10:56 am #1364410
    jamesbarrell

    Hey Ismael,

    That’s great thanks, it almost works…

    One small issue is now the video itself is not in the centre. Any way to have the video centre middle of the flex cell?

    Thanks for the quick reply also!
    James.

    September 12, 2022 at 10:16 am #1364682
    Ismael

    Hi,

    Thank you for the update.

    Have you tried adjusting the top and left position of the iframe element in this css rule?

    .flex_cell.av-with-video .flex_cell_inner .avia-video .avia-iframe-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

    You can also adjust the value of the translate function in the transform property.

    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

    Best regards,
    Ismael

    September 12, 2022 at 10:42 am #1364686
    jamesbarrell

    Hi Ismael,

    Yes I tried adjusting those already but it doesn’t help.

    It’s the video itself that appears to not resize to the cell size now. So the video centre is almost off the edge of the screen…

    Any way to centre the video so the middle of the video is in the middle of the cell?

    Thanks,
    James.

    September 13, 2022 at 9:17 am #1364851
    Ismael

    Hi,

    Thank you for the inquiry.

    Have you tried applying margins to the iframe to adjust its horizontal position?

    .flex_cell.av-with-video .flex_cell_inner .avia-video .avia-iframe-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  margin-left: -50%;
}

    Applying a -50% left margin to the iframe should pull it to the left.

    Best regards,
    Ismael

    November 5, 2022 at 1:44 pm #1371437
    DSRE-agency

    Hello,
    I have the same problem. I want to insert a video where the image is in Paralax on the right side of the grid. In the background so that it plays by itself.

    Just instead of the background image of the column a video.
    The code does not work properly. Can you please send a working code for this problem here in the forum? I think the problem will have many more people.

    Thanks a lot! :)

    November 7, 2022 at 7:26 am #1371606
    Ismael

    Hi,


    @DSRE-agency    : Please open a new thread and provide a screenshot of the layout that you want to create. You can use imgur, savvyify or dropbox for the screenshot. We will close this thread for now. Thanks.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Video background’ is closed to new replies.