Streaming live at 10am (PST)

Auto Play Videos on Hero Banner


#1

Hi there, community.

We are building our new home page on Webflow and are trying to put a autoplay video on our hero banner (link: http://memed-beta.webflow.com/) but when we go through the link, a few seconds before the video starts, a black screen appear on it.

Screen 1 (Black Screen)

Screen 2 (Video Playing)

I suppose that the solution would be put a static image of the video till it starts, but we just can’t do it.

Is there any solution to fix this issue? Can you guys help us?

Thanks in advance and congrats again for your incredible service.

Best,

Ricardo Moraes


#2

depends on the size of the video. large videos / hq videos take longer to download / stream.

also depends on your connection and server availability... and everything between you and server.

I use the method you stated. Create a div - put a background image (of the video) in to the div.

That way... there's something there that resembles the video.


#3

Hi @ricamoraes, thanks for the post. I think that @Revolution is right, that it could be the size of the video, I noticed that you were using a .mov file for an .mp4 source link, and that video was 2.7mb which is quite large for a video for background purposes.

I have converted as an example, your hero_1.mov file at 2.7mb to hero_1.mp4 which is about 300kb.

Hopefully that will help. There does not seem to be any problem with Webflow. It could be too, you are using https links to link to your videos, and that takes longer for the browser to process, than public http links. For BG video I would advise not to use https links.

Cheers, Dave


#4

Hi, @cyberdave. Thank you a lot for your answer.

The link you've sent didn't open... Can you send it again, please?

I wanna try with your test... this should work! smile


#5

Tks, @Revolution. Probably the problem is only the size of the video...

Im gonna make a test with a smaller file and this should work.

Thanks again, buddy.

Cheers,

Ricardo.


#6

hi @ricamoraes, can you try this link:

https://www.dropbox.com/s/mrsr28996lbzlsp/hero_1.mp4?dl=0

See if that works?

Cheers, Dave


#7

Hi, @cyberdave.

We tried use your resized video, but it doesn´t work either: http://beta3.memed.com.br

The black screen still on it...

I received your email today, and Im replying here.

If you have any other guess, would love to know.

Cheers,

Ricardo.


#8

Hi @Ricardo, currently the link you provided was to the https location of the file. Could you point your url at the non-https location of that dropbox file to see if it makes a difference? You can use a dropbox link from a file uploaded to your public folder, but when inserting that link into the embed block, you need to be sure to remove the 's' from 'https' - otherwise you'll see a black background and the video won't load.

I hope this helps, let me know smile Cheers, Dave


#9

Hey, @cyberdave.

Tks for you reply again.

We already embed the video on this link:

<source src="http://dl.dropboxusercontent.com/u/1942273/_drop%20files/hero_1.mp4" />

Isn't it enough? Cause, when I click on it, goes to the "https" again... But the source is only "http"...


#10

Hi, when I look at your page, I see the hero video, but it has a different file name:

<source src="http://dl.dropboxusercontent.com/u/1942273/_drop%20files/hero_1.mov">

This was on the page http://beta3.memed.com.br/

Could you check that, and make it so the .mp4 loads up and then will take a further look? The https has caused this problem in the past, so it was one thing to check out, but that appears to not be the issue.

I await your response. Cheers, Dave


#11

@cyberdave, problem solved!

The issue wasn't the "https" or the size of the video. We only needed to describe the "poster video", wich was an image, then the video comes on autoplay.

Hope this can help other users with the same problem. smile

Thanks for your support.

Best,

Ricardo.


#12

Awesome @ricamoraes, thanks for the update !


#13

Hey @ricamoraes any chance you could share the HTML embedd code you used to achieve autoplay bg video in your website.

It would be much appreciate/

Thanks in advance


#14