Archived topic
Adding background video to a container in a grid
7 replies · Started by Cleo on August 11, 2022
[plugins installed: GeneratePress Premium, GenerateBlocks, GenerateBlocks Pro]
I am creating an image grid where each block has a title centered on top. I'm using Grid and adding a full background image to each container then adding headline to each container and adjusting its location (to center the title) using spacing.
I would like one of the grid containers to autoplay a video in the background instead of a static image. In other words, all grid containers will contain full images with headlines centered on top of them, but one will be playing auto-playing a video.
I don't see a way to add a background video to a container - only Image URL, and Advanced (maybe this is the key but I might need documentation for this).
I'm able to add a video to a container and have it autoplay (provided muted is on), but I'm not sure how to overlay a headline. You do this with the Hero Element. Maybe there's a way to do a grid in Hero Elements?
Below is an example of the list view for a one-square grid.
> Grid
> Container
> Headline (obviously this just sits above the video, but maybe there's CSS I can add to move it on top of the video)
> Container
> Video
Thanks!
My indentation didn't come across in the List view example. Should have used code formatting:
> grid
> container
> headline
> container
> videoHi there,
you can use the method provided here:
https://docs.generatepress.com/article/background-video/
Ignore that this is in a GP Element, it can be applied to any Container.
That worked. You guys are amazing!
Glad we could be of help!
I have tried this and cannot get it to work. The video background is a url from vimeo. Any help is greatly appreciated. It is currently on this page: https://gc.fresheggs.biz/
Hi Holly,
The video link has to be the link to the video file, something ended with .mp4or .mov for example.
I am using a vimeo link. The only one I can find with that in it is:
https://vod-progressive.akamaized.net/exp=1660956049~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F3905%2F18%2F469528695%2F2095247645.mp4~hmac=36bfe53d938edde25b35a6eb96668ac12c8948a4562c518ee217ea691e3f2c8c/vimeo-prod-skyfire-std-us/01/3905/18/469528695/2095247645.mp4?filename=file.mp4
It isn't working either.
