CMS Video Background. HELP!

Design help CMS
1

Hi there

Need help with a project I am currently working on.
I have been trying for a while now to find a way to add a CMS Video background to a collection. See below

28
281984×1204 325 KB

This is the code I am using but for some reason this is not working for autoplay. So it is pointless in a way.

<iframe class='sproutvideo-player'

src=‘https://videos.sproutvideo.com/embed/a09ddbb31014e1c428/6f8d30c44d2c7679?bigPlayButton=false&amp;showControls=false&amp;autoplay=true;loop=true’ style=‘position:absolute;width:100%;height:100%;left:0;top:0’ frameborder=‘0’ allowfullscreen>

Anyway anyone could help me with this?

Many thanks in advance.

Here is my public share link: https://preview.webflow.com/preview/classicperspective?utm_medium=preview_link&utm_source=designer&utm_content=classicperspective&preview=5a626268e960effb152a53908770cb83&pageId=5d5531afdd4be97b9075ee9e&itemId=5d5531afdd4be94dfc75f96f&mode=preview

2

You can’t autoplay a BG video with sound.

3

Thanks for your reply, Much appreciated.

How do I not play with sound? I do not wish to have sound anyway.

4

Actually with Sprout you can. I did not know that. It auto mutes the sound and shows a mute button overlay. You can add a background=true parameter so it removes all controls.

This code is working on a pen I just tested. Here is a live view.

 <iframe class='sproutvideo-player' src='//videos.sproutvideo.com/embed/a09ddbb31014e1c428/6f8d30c44d2c7679?autoPlay=true&loop=true&background=true' width='100%' height='100%' style="position:absolute;" frameborder='0' allowfullscreen></iframe>

Nice video. Well done.

1 Like
5

Oh how you have just saved me so much time and stress.
Thank you so much for your help I honestly cant thank you enough!

Now that its inserted on my website there are black lines around the video, well on the edges. Any idea what I have done wrong :laughing:

00
002548×1428 247 KB

6

Also i tried Viemo but still no luck and its even worse. There is a huge space on the sides for some reason and still no auto play and has a huge play button on it.

I really need this sorted as soon as possible.

52
522524×1358 684 KB

7

My main question here is, what is the video size?

8

Not sure what size but it should not make an issue as when i use the same video on a non CMS page it works fine. Also I just tried a lot of different videos it just seems on CMS its not working.

9

Videos have ratios. Knowing the ratio is important so you can apply the right padding to the parent container to ensure the video fills the container, yet maintains the correct aspect ratio.

The demo below uses a video that is 16:9. I am using the Vimeo player API and some simple HTML. This would work in a HTML embed on Webflow. If you wanted to constrain the video size, you would add a width to the containing element. Note: With Vimeo the ?background option requires a paid account.

1 Like
10

Thanks once again.
I do have a paid account with them.
How would I go around to constrain the video size, that would add a width to the containing element?

![55|690x400](upload://eqJL6lbEBFLN1GyMZ0oCdRusiZn.png)

The photo above is what i currently have.

11

FYI: Image not visible.

If a parent has a width defined, the .vwrapper in my demo would be width constrained by its value. The aspect would stay as it is set.

12

Look at the pen again. You should see what I am saying. Buy me a beer. I am getting thirsty. :wink:

13

Haha I sure owe you one!!!

Sorry but I am still none the wiser. Not sure what i should be doing. The section is perfect size so shouldn’t effect the video but yet im still stuck with these horrible white lines on either side of my video.

14

I shared a project you can use as a reference in your other post.

15

Hi all, it would be nice if anyone could share a simple guideline on how to get a CMS video link from vimeo to play automatically and without controls filling a section width and height.

#cms #collection #video #autoplay