Video in background
I have two rows with content. One with a dialog box (fill in the blank) and the other one a footer.
I need to have the dialog box sitting vertically centered.
I need to have the footer resting on the bottom.
Can you help me with this?
I'm trying this codepen found here... http://codepen.io/Scarbrough9/pen/vNzqLz
It seems to work ok, but I'm not sure about the little bit of code in the provided CSS which reads:
/* background-image: url('*** Poster image goes here ***'); */
My question is: Where do I put the "address of the .jpg? I've tried inserting it right where it is and also putting it right below the comment, but I cannot seem to make it show
1. Create a row. Make sure the dimensions are width 100% ('auto' NOT selected) and the Max-width has 'auto' NOT selected as well. Max-height needs to have 'none' selected. The margins are both selected with 'auto'. Position display is 'block' and position is 'static'.
2. Drop a html element in the row. In the html element dialog box paste
<video autoplay loop id="video-background" muted>
<source src="video/sample.mp4" type="video/mp4">
(video/sample.mp4) is the location and name of the video.
3. Add into the HEAD section,
<link rel="stylesheet" type="text/css" href="sample.css">
(sample.css) is the name of the custom style sheet you need to have to run the video.
4. Create the style sheet (whatever you named it above) and add the following
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */
/* making the video fullscreen */
That's it... just place the css where you told it would be in step 3 and away you go. It resizes with the window. (I have included the stylesheet)
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.