Video in background

User 2530125 Photo


Registered User
27 posts

Is it possible to put a video in the background? I have an image there but a responsive video would be the best.
User 103173 Photo


VP of Software Development
0 posts

You can use the HTML Element for that. Just upload your video to Youtube or Vimeo and paste in the markup into the HTML Element properties.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2530125 Photo


Registered User
27 posts

Great... ok I have something working now in the background. My mind is now blank.

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?
User 434929 Photo


Ambassador
938 posts

this demo ( https://www.youtube.com/watch?v=T5RIh4StIvs ) probably will helps but for now RSD not supporting % value , and for that you need add container into column and position set to relative and simply any pixel value for direction property and change to % value manually.
Guys at coffeecup are awesometacular.
User 283347 Photo


Registered User
388 posts

I have a question about the video background ...

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
User 2530125 Photo


Registered User
27 posts

Sorry guys, I should have added the solution I came up with that works wonderfully.

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>

(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

body {
margin: 0;
padding: 0;
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */
background: #333;
background-attachment: fixed;
background-size: cover;
}

#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}



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)
Attachments:

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.