It is possible, but may not be easy depending on your access and ability with HTML.
Background images are simple because you can simply apply a background image attribute to the elements css. It's a build in css function.
Background videos don't work that way. To set a background video you have to first set an element containing it to "position: relative;" and "overflow: hidden;". You then need to place an htlm5 video tag somewhere in that container and set the css for this video tag to "position: absolute;" and, depending on how you want it to fix to the element, set the top, bottom, right, and/or left attributes accordingly. I usually center mine and that would look like:
You will probably want to set an wrapper wrapping just the banner content to "position: relative;" as well. The reason for this is that you will need to play with the "z-index" settings for the video and content to get the video behind the content.
Also, when dealing with video, the video tag contains "<source>" elements which reference the video files (you can store the video files in your Hubspot file manager). You need to use at least 3 video files: .mp4, .ogg, .mweb. This is because all of the different browser support different video file types so having all of the available allows the video to work on all browsers. There are some online video converters as well as several adobe products that can convert video.
Also, and this is a new issue I have run into, due to mobile data misuse browsers are now setting it to where it is impossible to autoplay a video. I know that this was an issue with the iPhone on a project I had recently, but I'm not sure if it has spread. You can find articles on this: https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/
This means that you video will essentially be a still image anyways on some devices and without a play button the video is useless. You can set a poster on the video to show when the video isn't playing but that is another issue because the poster itself isn't really malleable so you have to use some witchcraft to alter it I believe I did something along the lines of this. You can see my latest video project on the second section of this page: https://www.ketra.com/ I used a background video for the section but if you click play a different video element plays a longer version of the video.
It is possible, but may not be easy depending on your access and ability with HTML.
Background images are simple because you can simply apply a background image attribute to the elements css. It's a build in css function.
Background videos don't work that way. To set a background video you have to first set an element containing it to "position: relative;" and "overflow: hidden;". You then need to place an htlm5 video tag somewhere in that container and set the css for this video tag to "position: absolute;" and, depending on how you want it to fix to the element, set the top, bottom, right, and/or left attributes accordingly. I usually center mine and that would look like:
You will probably want to set an wrapper wrapping just the banner content to "position: relative;" as well. The reason for this is that you will need to play with the "z-index" settings for the video and content to get the video behind the content.
Also, when dealing with video, the video tag contains "<source>" elements which reference the video files (you can store the video files in your Hubspot file manager). You need to use at least 3 video files: .mp4, .ogg, .mweb. This is because all of the different browser support different video file types so having all of the available allows the video to work on all browsers. There are some online video converters as well as several adobe products that can convert video.
Also, and this is a new issue I have run into, due to mobile data misuse browsers are now setting it to where it is impossible to autoplay a video. I know that this was an issue with the iPhone on a project I had recently, but I'm not sure if it has spread. You can find articles on this: https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/
This means that you video will essentially be a still image anyways on some devices and without a play button the video is useless. You can set a poster on the video to show when the video isn't playing but that is another issue because the poster itself isn't really malleable so you have to use some witchcraft to alter it I believe I did something along the lines of this. You can see my latest video project on the second section of this page: https://www.ketra.com/ I used a background video for the section but if you click play a different video element plays a longer version of the video.
