Autplay a background video in the rich text editor

Design help General
1

How can I Autplay a background video in the rich text editor while it being full width (100% width) as well.

I’ve been playing around with a google Drive embedded video through a iFrame in the custom code frame in the rich text editor. But no luck, maybe someone can help me? Check this code:

<div class="test">
<iframe src="https://drive.google.com/file/d/14KPguCB1x3-P-ZpvbxhOXlTl1TJc8nAv/preview" width="100%" height="auto" allow="autoplay"></iframe>
</div>
2

That’s a strange-sounding setup, do you really need the video reference inside of your rich text content?

Usually I think you’d put the video behind the RTE, especially so that you can dictate the dimensions independently.

One option though might be to use Finsweet’s Powerful Rich Text, and then to pull the background video element into your RTE using their element feature.

3

Hi there,

Thanks you for your reply. Seems I’ve found a good way to implement it trough custom code. Check: https://marts-mounts.webflow.io/branding-case-study/catch-a-jet And here you can find the code I used:

<video autoplay="autoplay" muted="true" loop="true" id="myVideo" width="100%">
  <source src="https://uploads-ssl.webflow.com/6314fcc170d13722e369c6e9/64064e82c34bf21334b39850_Comp 1_2-transcode.webm" type="video/webm">
</video>

Problem now is that it is not autoplaying because I’ve checked my “reduce motion” setting in my own Mac system preferences. Seems like all background video’s aren’t working on this site… But this issn’t an issue when I upload this piece of code to an older Webflow website…

4

Huh… that’s a nice UI / UX displaying a video that way :smile:

5

haha it is not that user-friendly. Luckily I’m the only one handling/editing this website.