Complete custom code for full browser HTML5 video background

Design help General
1

Hi al!! Can you help me?

I make a section with background video but I can’t understand how to make it 100% with.

It must be as in that site: home
here is a video. it’s url is http://studio-t.ws/neta/advocate2/assets/3369428_resize.mp4
it is really small.

What I do in webflow:
make a section
add an embed object into that section
and then insert a code like in the site i showed.

<video id="video" loop="" muted="" autoplay="" >
				<source src="http://studio-t.ws/neta/advocate2/assets/3369428_resize.mp4" type="video/mp4">
					<source src="http://studio-t.ws/neta/advocate2/assets/3369428_resize.webm" type="video/webm">
						This browser does not support HTML5 video
					
				
			</video>

unfortunately it is now full width

2

Ok try to use this code structure and parameters for a good behavior of your video bg:

<video autoplay loop style="min-width:100%; min-height:100%;" poster="/images/video.gif">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  <img src="video.jpg">
</video>

The important part in this is: style="min-width:100%; min-height:100%;"

Don’t forget to set a poster image. If yu do this well you don’t need to set the img line.

Also set your HTML widget elment to this:

http://vincent.polenordstudio.fr/snap/vxmhf.jpg

1 Like
3

thank you very much. It really helped!

1 Like
4

hi guys, maybe i’m missing something but i’m not sure how you get a video which is saved on your computer or youtube and give it a url which then allows it to be embedded?

(just as you have here: http://studio-t.ws/neta/advocate2/assets/3369428_resize.mp4)

Any help would be HUGELY appreciated!

Many thanks :smile:

5

Hi @George_Papadamou, thanks for the post. You would put your video urls for each file format in the “src” attribute:

i.e. the example below with all three needed formats to work across all browsers. If you do not have the .webm or .ogv versions, you can create those using most editing tools. On Mac I usually use Miro Video converter for the .ogv and .webm versions. That is up to you :slight_smile:

<video autoplay loop style="min-width:100%; min-height:100%;" poster="/images/video.gif">
  <source src="http://studio-t.ws/neta/advocate2/assets/3369428_resize.mp4" type="video/mp4" />
  <source src="http://studio-t.ws/neta/advocate2/assets/3369428_resize.webm" type="video/webm" />
  <source src="http://studio-t.ws/neta/advocate2/assets/3369428_resize.ogv" type="video/ogg" />
  <img src="video.jpg">
</video>

You place this code above in an HTML Embed widget: Custom code in head and body tags | Webflow University

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

6

Thank you for your help, but i wasn’t sure how you actually get a url for a video.

For example, i have a video saved on my computer and on youtube, what would the url for this video be? do i need to host it on a server? and if so do you know how this is done? Ive already tried pasting the youtube url into the src= but that doesnt work!

sorry i’m a beginner and this is probably really obvious to other people! I really appreciate your help!

Thanks again :slight_smile:

7

Hi @George_Papadamou, Webflow supports youtube and vimeo directly if you use our video widgets, but those do not support background video yet.

You can get a youtube video and use it as a background, if you have the direct link to the YouTube video. You can get this from YouTube embed code:

1324×1428 1.13 MB

If you want to host your own video, you can upload your video to Dropbox, and then get a share link to that file on Dropbox and use it as the source.

Webflow does not support video file uploads yet, but in a future version of the Asset Manager :slight_smile:

If you use Dropbox, after you upload the files and create the share link to those, you can post the link and we can check if the video is showing up :slight_smile: Cheers,
Dave

8

Thank you so much! this is really helpful, one small problem is that the youtube embed version has a play button and youtube branding?

Do you know the code i would need to make this work?

Once again thank you so much!

9

Hi @George_Papadamou, if you use the Youtube default embeds, they include the play button and the branding, thus it is quite usual for people to NOT use youtube for video backgrounds.

I would recommend the dropbox route or other file storage online, to upload your own videos and load those from that storage.

Check out this article: [Tutorial] How to add a Custom HTML5 Background Video - Webflow Tips - Forum | Webflow

Let me know if you have any questions. It would help for you to start a new post, with the read-only link to your site and the video urls you are trying to use :slight_smile: cheers, Dave

10

Hello,

I have created a new post - http://forum.webflow.com/t/uploading-a-video-from-drop-box-and-using-it-as-a-background-video/14697?u=george_papadamou

It still doesn’t seem to be working for me :-/ really not sure why!

Thanks again george

11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.