Video on skagenfiber.no

[TomasJarvling]

Hi
On this page: www.skagenfiber.no there is a video playing on the top. I would like:

1. The audio to be optional with an audio button
2. The video should be stretched/covere the entire section as it does today

I have tried to place a video element, which could work, but I do not know how to use the old feature ”marginless columns” so that i get the video to cover the entire length.

Can you help me?

Tomas

[kory]

Howdy, @TomasJarvling!

Thanks for writing in! There might be a couple options you can explore here, but keep in mind that each will have their drawbacks. You are currently using a background video, which is intended to be decorative in nature and add some additional “flair” to your design, not a fully functioning “video” on your site. What is more tricky is that browsers are getting even more strict on how they handle autoplaying videos that also have sound. Effectively, most modern browsers will kill autoplay on a video if they detect sound, so to have it autoplaying it will need to start muted (which is perfect for background videos as they are always intended to be muted as they are more decorative).

So if you have a need for an actual video with audio that is necessary to your website (perhaps some sort of narration, et cetera), you will definitely need to use a Video Element. The reality of doing this is that you will not be able to place some text on top of this video as you have currently (at least not without a bit of custom CSS).

So all that being said, if you’re looking for a fullwidth video that is autoplaying but can optionally have the audio enabled, you’re effectively looking at a Video Element in a fullwidth Section.

From looking at the markup on your site, it seems like you’re using our “Classic Sections.” If that is the case, you should be able to allow any content to go fullwidth by going to the Row within your Section and setting the Column Container setting to Off. This will remove the global site setting used to contain all content to a max-width, and will allow you to have content stretch to the far edges of the screen. You should not need “Marginless Columns” here as you will only have one Column that you need stretching to the edges of the screen (Marginless Columns deals more with the styling and spacing of multiple columns together within a Section, irregardless of whether it’s fullscreen or not).

Next, add your Video Element (I’m not sure if you are planning to use our “Classic Video Player” or newer “Video” Element, but the concepts here are the same) and make sure to set Autoplay to On and Mute to On. Finally, make sure that the video’s Controls are set to On. This should give you what you’re looking for.

Hopefully this helps to point you in the right direction, cheers!