Embed video autoplay

Design help Custom code
1

hey,
Iv’e been trying hard to figure out how to show a video that will:
a. autoplay & loop
b. be responsive
c. work on mobile (not sure its even possible)

(somthing like this)
for now this is my test - it works in the designer, but when i publish - it wont autoplay.
any suggestions?

webflow version
Publish version

video autoplay loop style=“width:100%; height: 100%; position:absolute; z-index: -1;”
source src=“https://dl.dropboxusercontent.com/s/rzkk6xcvjx8p9ws/Screen.mp4” />
/video>

Thanks

P.S
There seems to be a lot of threads about showing videos but none of them was working for me…
It would be great if someone could make a clear guide on how to make it work.

2

Hey matanbe

I’ve subscribed to this thread since I will do something similar soon. Have you got any solution? By the way - in Safari, the video loops even in published version so can’t see where your problems are? Maybe some other browser doesnt work as it should?

I’ve seen this code before(it’s for a 500x300 video):

3

The video works fine but not in all browsers

Your video is already autoplay & loop (Test this site on Microsoft Edge -or- Firefox - but not in chrome - encoded problem).

This is why I love to work with youtube (Fully supported).

B. Your video looks responsive (Only remove the huge wrapper padding right/left on mobile) + Your layout is very weird (You use 120vh why?).

C. “work on mobile” again browser issues. Again nightmare - so it’s better to use youtube player hide the controllers and that’s it (Youtube solve this bugs for you)

Weird but will work - if you upload the video to youtube - than download the video from youtube - you get working video (Youtube encoding the video like it should). Or use software.

WHAT YOU NEED TO KNOW ABOUT THE MP4 AND VIDEO ENCODING FOR THE WEB:

MP4 H.264 /AAC is best due to compatible settings and available universal support.

4

Hey Siton,
thanks for taking your time with this answer.

It’s clear to me now that the problem is with Chrome.

I tried uploading and downloading from youtube - didn’t work on chrome
I tried adding another Video Src to webm file type - not working.
also tried to create a Theora encoded video - also no go.

how can I achive this:
A responsive video, with autoplay and loop to work on chrome.
http://eien.tokyo/work/pixeing (scroll down a bit)

I would imagine it would be very simple but for some reason it burning days of work for me :sleepy:
Thanks again!

5

Maybe try to add muted attribute

muted - should fix the issue of autoplay block

Why?

About autoplay - now i read a little - chrome block autoplay with sound

Google started rolling out a new version of Chrome last month that further addresses autoplay videos. The latest update, version 66, includes autoplay video changes that stop Chrome from automatically playing videos if the sound is on by default.
Google starts blocking annoying autoplay videos in Chrome - The Verge

3 Likes
6
  1. On a computer, go to the YouTube video you want to embed.
  2. Under the video, click SHARE!.
  3. Click Embed.
  4. From the box that appears, copy the HTML code mybkexperience.
  5. Paste the code into your blog or website HTML.
8

Amazing. This worked brilliantly.

Thank you