Website Background Video

Hi I have seen a few websites that have video's as there backgrounds. Some of them are very impressive. How can I do that with my website.
If I purchase the video what format should I purchase and how could I put this on my site?

Isn't natively supported in Muse at this time but have a look at this thread for a few suggestions and tips on how to go about doing it - http://forums.adobe.com/thread/1213057.
Thanks,
Vinayak

Similar Messages

How To Create A Website Background Video In Adobe Edge ?

Hello,
I have video file in my computer SSD drive and i want it to play as background on my web page (page that i am creating).I did try to follow this video:
How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
but i cant follow 100% what he is doing.
Guide that i did try to follow is at this link: How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
Steps i do in Adobe Edge Animate CC
1.) Create New
2.) i click + sign under section Library >> Scripts >> Add JS File from URL...
URL that i am adding is: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js (URL is taken from site: Edgehero.js )
I add this link: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js to box that occures after i click on Add JS File from URL
3.) I go to Edgehero.js and from there i scrol down to section named as Media - Html5 video / Html5 audio
and i select from there this:
there is a code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
4.) I go to Adobe Edge Animate CC 2014 and right click on project and select Open Actions for "Stage"
and then i click on + sign and select creationComplete
This will open Stage window
there i will copy this code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
5.) Then i click on ++ sign under library >> Video
and i add video from my computer SSD drive.
Video is named as video3.mp4
Now i eddit the code in Stage window (See above)
code will look after editing like this:
Then i change under left side px to %
6.) Then i copy backgroundvideo_1 from Stage Code:
Then i select Rectangle Tool and mark the area (white box) and i click on small C icon
And the box that occures i type there backgroundvideo_1_mp4 autoplay
now when i use ctrl and enter i only get gray box that does not play video.
What am i doing wrong?

Here is the html file.
Note video file that i try to add is random training video from youtube, And file format is saved using this site:
How do I download and save a YouTube video to my computer?
this is only for testing as i am not gonna put that video on background to my web page. I am only trying to understand how to add video as background.
http://www.filedropper.com/test3_5
http://www.filedropper.com/test3_6
http://www.filedropper.com/test3edge
http://www.filedropper.com/test3edgeactions
http://www.filedropper.com/test3edgepreload
Goal is to create background video like u can see here:
Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
Similar possibility is available also in Edge as i understand?

Firefox freezes when i visit websites with videos on the background or i watch videos.I have windows 7 and the laatest version of mozilla.

I have windows 7 and the latest version of firefox.When i watch videos on youtube or visit websites with videos on the background mozilla freezes. I tried to disable all the extensions and plugins but it had no result.I didn't had this problem with versions of mozilla previous to 4.

I have had a similar problem with my system. I just recently (within a week of this post) built a brand new desktop. I installed Windows 7 64-bit Home and had a clean install, no problems. Using IE downloaded an anti-virus program, and then, because it was the latest version, downloaded and installed Firefox 4.0. As I began to search the internet for other programs to install after about maybe 10-15 minutes my computer crashes. Blank screen (yet monitor was still receiving a signal from computer) and completely frozen (couldn't even change the caps and num lock on keyboard). I thought I perhaps forgot to reboot after an update so I did a manual reboot and it started up fine.
When ever I got on the internet (still using firefox) it would crash after anywhere between 5-15 minutes. Since I've had good experience with FF in the past I thought it must be either the drivers or a hardware problem. So in-between crashes I updated all the drivers. Still had the same problem. Took the computer to a friend who knows more about computers than I do, made sure all the drivers were updated, same problem. We thought that it might be a hardware problem (bad video card, chipset, overheating issues, etc.), but after my friend played around with my computer for a day he found that when he didn't start FF at all it worked fine, even after watching a movie, or going through a playlist on Youtube.
At the time of this posting I'm going to try to uninstall FF 4.0 and download and install FF 3.6.16 which is currently on my laptop and works like a dream. Hopefully that will do the trick, because I love using FF and would hate to have to switch to another browser. Hopefully Mozilla will work out the kinks with FF 4 so I can continue to use it.
I apologize for the lengthy post. Any feedback would be appreciated, but is not necessary. I will try and post back after I try FF 3.16.6.

Help centering background video in fluid grid layout inside div

Hopefully this all makes sense. I am trying to center the background video (the animation on the website towards the bottom)... I have tried all sorts of things to try and center this. If it can't be done, it can't be done. The banner on top works as should. If all else fails I will just not use a fluid grid page and that will be that. I self taught myself Adobe After Effects to make that animation (took me a month and 1/2) and I have self taught myself Dreamweaver.. coming from Frontpage and Expression Web.
Here is the website (thank you in advance for your input):
http://a1customcomputers.com/Web%20Development/A1CC/Main.html
I just tested it and it's not playing how it should.. I'll figure that out later but where it says "Enter", that is what I need centered. Thanks
My html so far:
<!doctype html>




<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet"/>
<link href="assets/style.css" rel="stylesheet"/>
<script src="respond.min.js"></script>
<script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div align="center"><img src="A1_Banner.jpg" /></div>
</div>
<p> </p>
<p> </p>
<div id="div2" class="fluid"></div>
</div>
</body>
</html>
my style.css so far:
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 90%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: none;
width: 400px;
float: left;
display: block;
padding-left: auto;
padding-right: auto;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 100%;
clear: none;
float: none;
height: 100%;
margin-top: 20px;
padding-left: 0.7851px;
padding-right: .7851px;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0.7581%;
padding-right: 0.7581%;
clear: none;
float: none;
margin-top: 20px;
height: 100%;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
margin-top: 20px;
clear: none;
float: none;
padding-left: 0.7581%;
padding-right: 0.7581%;
height: 100%;
#div1 {
width: 100%;
margin-bottom: 13%;
#div2 {
width: 400px;
margin: 0 auto;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
/* DEMOS */
#div2 {
width: 400px;
margin: 0 auto;

Not trying to argue with you and I know you are only trying to help and I know that you know ALOT more about this than I do.. you do... I don't know if background was the correct "place" to call it.. but nevertheless.. what I beleive it is, is in the background.. and maybe that is part of the problem. It is supposed to be called from a JQuery plugin, and where I have it now is in a "div [div2]" in the "gridcontainer". It was working and my latest attempts it was working great.. but wasn't centered. But I've changed a bunch of code around lately and so that is why it is not working right now... The "Enter" that you see on the link I provided is the "poster". When I get a chance I will work on it and get the animation working again.. or back to normal.. just not centered. At first I was thinking "centered vertically".. and so for like a week, maybe longer.. everthing that I was searching for and trying was for "vertically center a div".. then it hit me.. you jacka$$.. you want to horizontally center it... Haha! Again, thank you for your input.

Large background video/image

Hey all,
I am currently designing a website and one of the main features I would like is a large background video/image with header and large centred text laid over the top. The link I have provided shows exactly what I want to achieve but I don't know where to start.
The link below is the example:
http://weareadaptable.com/
Thanks for the help.
Alex

You have a link with an example. Do you know how to view source code? Start there!

How can I fade in menus with background video?

Hi there,
I'm new to this forum (and to DVD SP) and have searched without being able to find out how to get my menus to work in this scenario:
I have a short (6s) background video that does not loop and ends on a still frame.
There are two drop zones, both with semi-transparent areas so that I can see the video play underneath. One drop zone has my title (as text in DVD SP) and the other has my "play" button.
I want my video to play for 5s and then have all the other elements fade in over the last second.
Here's what I've tried (thanks to suggestions from here and dvdstudiopro.digitalmedianet.com--which uses js that really bogs down Firefox, BTW):
A. I created a custom patch using PS that's a 6s .mov file that's simply a black mask that fades to white.-->this causes my drop zones (which are layered psd files with a mask of their own) to fade up, BUT the custom patch overrides the drop zone mask and causes the drop zone to become completely opaque.
B. I tried separating the background video and menus into separate menus in DVD SP. The first menu plays the video, then jump to the second menu which contains the last frame of the video as a still with the drop zones and button on top.-->this works but there is a noticable delay going from menu 1 to menu 2 and it looks horrible.
C. I created a 6s .mov file in FCP that does exactly what I want, but when I bring it into DVD SP, the quality suffers.-->I exported without compression from FCP and with, same bad results (especially in text).
Is there a way for me to get this to work gracefully?
I put a still of my menu with callouts at this url if it helps:
http://infactfilms.com/dvdmenu/
Thanks very much and I appreciate the wealth of info in this forum.
Cheers!
misho

Hi
Read this note about Menu rendering in DVDSP:
If you edit all your elements in FCP, adding the graphic fade in/outs, texts, etc and then export it directly with Compressor to MPEG2, and use that file/s as Menu backgrounds, DVDSP will not re-encode these menus.
If you add in DVDSP text, graphic for buttons, drop zones, etc it will need to render and encode the background again to add those graphics.
Take care of what video format you choose in FCP for your background edit. DV codec works really bad with graphic elements; you better choose DVCPRO50 sequence settings and export directly from FCP through Compressor. That way FCP will use the raw info from each frame and not the render files as if you export as Quicktime Movie.
Hope that helps !
Alberto

Firefox 9.0.1 keeps hanging once I access a website with video, when I write e-mails etc. If a press ctrl+alt+del, opens a window to confirm closing, and firefox works again. When I close that confirm window, firefox immediately hangs again.

It stops working if I access websites with videos, and all sort of more complex flash. It I try to write an e-mail, it also stops. I can't do anything. PC keeps working, though. So I press ctrl+alt+del. It opens that window asking if you want to close all the tabs. I notice that firefox start to work again, behind that window. But, once I close the window, it stops again. Sometimes I can close the tab with the video before it hangs again, which can take a few ctr+alt+del's. It doesn't happen with other browsers! It started 1 week ago. Is it an extension? Or a virus (i use avast)? Thank you!

Perform the suggestions mentioned in the following articles:
* [https://support.mozilla.com/en-US/kb/Template:clearCookiesCache/ Clear Cookies & Cache]
* [[Troubleshooting extensions and themes]]
* [[Managing the Flash plugin]]
Check and tell if its working.

How to create background video in a persistent menu template

I'm working on an Extras project which requires a background video to be played in the menus. I can start the background video as suggested in this post https://discussions.apple.com/thread/5276546?tstart=0 but I can't get the video to play after returning from playing the feature. I think the event "iTunes Video Did Close" should be used to implement this action but I have no luck using it with the background layer. The event works fine if used in a normal page. Any input on this problem would be appreciated
Note:
The problem can be solved if I can somehow access the background video in the background layer using JavaScript (so I can fire the event in a normal page and start the playback using JavaScript) but I don't know how. Can anyone help me with this too?

This is very simple. It's two copies of the layer. The bottom (back) one has been scaled up with a blur effect.
Start here to learn After Effects:
http://adobe.ly/AE_basics

Firefox 3.6.12 - Slackware 12.2 - Some websites, including this one here at mozilla, for some reason display anything (including other programs running) as the website background

I typed this question I opened a command prompt to see my java ln -s command, and now a large portion of that window is now part of the website background. Right now, part of the browsers top and menus are part of the website background as well as the remnants of a command prompt window as well as remnants of a file browser window. I updated to the latest java and flash. Interesting enough is slackware.com even display parts of the browser menuing and location bar as well as the top. http://www.laconiamcweek.com/Schedule . I did an experiment and found if the background involves an image file this happens.

Well, because 3.6.12 made it nearly impossible to browse websites, I have returned to 3.0.19, even with upgraded java and flash it works fine, no extra background images.

How do I add mpg background video behind a psd menu in Encore?

How do I add mpg background video behind a psd menu in Encore? The psd file is transparent and it still comes out as pitch black behind the menu. I'm inexperienced with these products so any help is greatly appreciated.

If you have done what Russ describes and it does not work...
Encore replaces the background layer with your motion video. So make sure you have a) a layer at the bottom (in Photoshop layer order) that is named "background," and b) no other full layer above that (for example, an image in another layer you've used instead of the original background layer).
Also keep in mind that setting transparency in Photoshop is overridden by various Encore processes.

Load external flv as background video and loop

Hi, I want to have a subtle background video playing behind a slideshow. What's the code to attach a video and have it loop endlessly? Actionscript 3/AS3 only.
Thanks,

Updated Help
My friend is using VB.net to code a koisk. We would like if
possible to be able to set the background color using the VB.net
program. to be able to change background to a RGB color using the
external program. I do not know Flash coding, I only know how to do
buttons. I am guessing i will need some sort of global varible to
set this up. Any help would be great
Thanks.

Responsive (full)background Video

HI!
I have a question is there any widget? that allows to create effect like here: CROP THE BLOCK | Creative filmmakers and videos from Paris and Berlin
I mean the background video is link from vimeo/youtube and its RESPONSIVE thx for help!

the 2 links vivek sent you are spot on. i am working on a background video site and have spent hours and days researching and testing... qooqee video widget is great and well worth the 3 dollars and your not hosting the file your self but letting you-tube do all the heavy lifting. The challenge is to also get background video to auto-play on mobile devices. you can do this by converting your video file to a gif file.I am in the process of doing this at moment. ill post a link here when done few days. works a treat and tricks iphone at least. it was one of the people on the adobe staff team that helped me out a few weeks ago but i cant find the form. if i do ill post it here as well
padraig

Changing a background video in the 21 jump street tv opening

After the spray paint can finishes and the wall shatters I'd like to be able to substitute a different background video while the shards are still flying off the screen. Can this be done in premiere pro?

I agree with Ann.
If you take a frame of the finished, spray painted wall, just before the shattering, and you used After Effects to shatter it, then you could do whatever you want. Trying to keyframe that would be rotoscoping one frame at a time. It would be faster to learn to use the Shatter effect in After Effects.

Rescaling a background video... how?

I want to be able to resize a background video that is in SD format. The project, however, is widescreen HD. I want to be able to resize the background video so that fills the monitor screen completely.
How do I do this?

Can you tell us about your source video and also your Project Preset? These two should match 100% and there will be no need to Scale anything.
Then, someone can direct you.
Good luck,
Hunt

Adding a background video clip covers my template.

Is there a way to have a background video playing behind the framesFilmstripCover template?
Thanks!

Do you have Flash? If so, it's pretty straightforward - there's a FLV playback Component, you drag that onto the stage, link it to your FLV file, and save as a SWF (more or less).

Website Background Video

Similar Messages

Maybe you are looking for