HTML5 video backgrounds
Hi all
I asked a question similar to this a few weeks ago and have since found what will help what I have to do.
I have a background video to work now that the scrolls with superimposed text. The only problem is that the video is not central when the window is resized. That's because I put the css right: 0; bottom: 0; I can't find a way so the video remains focused and overflows from any offshore also. Any help in doing this would be great! I downloaded on my current Web site construction and you can watch the video here: www.sawvisuals.com/video1.html
I have to mention that I have only really tested in Safari and understand that different video files and placeholder images are necessary as well. The design is / will be adapted and I'll hide video on mobile and tablets.
Here is my Html and Css:
HTML:
< body >
< div class = "gridContainer" >
< div id = "wraper" >
< video autoplay in loop with muted class = "bgvideo" id = "bgvideo" >
< src = "videos/clouds.mp4 source' type =" video/mp4">"
"< source src="videos/clouds.webm.mp4 ' type = "video/webm" >
< / video >
< / div >
< div class = "spacer" > < / div >
< div class = "info" >
< H6 > CREATIVE SOLUTIONS for PRINT, < br > WEB & VISUALIZATION < / h6 >
< / div >
< div class = "text" > Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. < / div >
< / div >
CSS:
{body
left margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
{.gridContainer}
Width: 100%;
Max-width: 1920px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
}
{.bgvideo}
display: block;
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
Width: auto;
height: auto;
z index:-9999;
}
{.spacer}
display: block;
Width: 100%;
height: 100vh;
}
. Text {}
Width: 90%;
padding-left: 5%;
padding-right: 5%;
padding-top: 200px;
padding-bottom: 200px;
background-color: #9FF;
}
{} .info
position: absolute;
top: 50%;
text-align: center;
margin left: 5%;
right margin: 5%;
Width: 90%;
do-size: 36px;
color: #fff;
-ms-transform: translate (0, -50%); / * IE 9 * /.
-webkit-transform: translate (0, -50%); / * Safari * /.
transform: translate (0, -50%);
}
Once more your help on this issue would be great!
Thank you very much
Alex
Add the desktop of css styles below and see if it makes a difference.
{video
Max-width: 100%;
height: auto;
}
Tags: Dreamweaver
Similar Questions
-
How to do HTML5 videos works again?
I've recently updated for Firefox 35 and now HTML5 videos will not work. I have NoScript, but disabling or removing it does not solve the problem. Switching in safe mode does not solve the problem. The problem is solved using a fresh profile or removing the prefs.js file, but this is not an option for me, as all my settings from scratch would be tedious hassle with that I wouldn't rather deal with restoration.
I know that the problem is with the update for Firefox 35 precisely because everything was working fine before and stopped working after. To be absolutely certain, I turned on my laptop that had the exact same extensions and settings imported to it from this computer with FEBE earlier. He used the 34.0.5 version and all was well with this version. I tested it with the site of the vine, all the videos worked. It also downloaded the update for Firefox 35 in the background and as soon as I restarted, the HTML5 videos were broken.
It's certainly something that Mozilla has changed but I forgot to change/remove an old framework which is scrub place works. If I could just figure out which lines in the prefs.js file was causing the problem, I would delete/change myself in Notepad.
For the record, I already had media.windows - media - foundation.enabled set to false. Videos that use Flash seem to work. I think Vimeo using HTML5, but it is the site of Flash videos not only that I could find that still works. Flash and Java have been updated the most recent versions.
COR - el said
Start Firefox in Safe Mode to check if one of the extensions (Firefox/tools > Modules > Extensions) or if hardware acceleration is the cause of the problem.
As I said, safe mode does not solve the problem. He is not one of my extensions. I tried to disable hardware acceleration earlier, but wasn't it no more.
Your list of details of the system shows that you have a user.js file in the profile folder to initialize prefs each time you start Firefox.
The user.js file is present than if you or another software has created this file and normally it wouldn't be here.It has only these two lines:
user_pref ("protocol - handler.warn - external .dnUpdate", false);
user_pref ("browser.sessionstore.resume_from_crash", false);Sure they are related to the extension, so I don't touch them.
There the prefs of media who do not by default?
- Media.*. Enabled
As I said, media - media.windows - foundation.enabled is set to false and it was the only entry with this search term that was not established by default. I changed to true and restarted and it fixed everything. Funniest, however, do the opposite was a solution proven for people with this problem in the past. This site says to do. You have said to do! https://support.Mozilla.org/en-us/questions/961627
So, anyone read this for future use, you may or may not have changed this setting later in 2013. Firefox 35 requires you to change back. Problem solved.
-
Problem with MusePen HTML5 Video - Widget
Hello dear community and great team of Adobe Muse,.
Some people have a problem, that they cannot see the background video of HTML5-Widget, which I use - some, too, can see.
I placed each videoformat inside (*.ogg, *.mp4, *.webm) and also placed an image of the poster to the loading screen.
The video is on auto run.
You know the problem and why is he here?
I really like using the MusePen Widget, because it's the only one, that I can fix it in position and things - also I can make invisible for mobile breakpoints, which does not work with the other HTML5 video-Widgets.
Here's the site I'm talking about: www.cmnt.it
Would be nice, if someone knows the problem and help me
Best regards, Felix
Have you tried to contact the developer of the widget directly for support? Not all widget developers watch these forums, so unless you're extremely lucky and find someone who had the same issue here it can be faster response by contacting the developer directly.
-
How to make a video background to a fluid grid presentation in DW CS6?
I have the full video backgrounds successfully placed in an ordinary web page, but cannot get a video to run as a complete history on a checkerboard to fluid. I searched this forum and the web without success.
Anyone have any suggestions for a source for this app?
Thanks in advance, Rich
First read this:
Can I use a video as a background? CSS-Tricks
I don't advocate using the layouts of fluid grid (inheritance). Support this feature faded when DW introduced Bootstrap for 2015 of CC. FGLs won't be much longer.
Bootstrap has some very practical classes to make suitable videos that take their proportions in reagents layouts.
ALT-Web Design & Publishing: reactive Bootstrap 3 Videos
However, FGLs do not have this support. If you yourself your own workaround solutions.
Background videos have a price.
- Too much bandwidth for mobile users.
- AutoPlay is ignored by most mobile devices.
- When it is used as a backdrop, the customary HTML5 video controls are not accessible.
Nancy O.
-
How to create a website video background in Adobe Edge?
Hello
I have the video file on my SSD drive computer and I want to play as a backdrop on my web page (a page I created). I tried to watch this video:How to create a website video background in Adobe Edge animated using Edgehero - YouTube
but I can't follow 100% what she does.
Guide I've tried to follow is at this link: How to create A Web site video in Adobe Edge bottom animate using Edgehero - YouTube
Steps I do in Adobe Edge animate CC
1.) create new
2.) I click on + sign article library > > Scripts > > add a JS of URL file...
URL that I add 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 - video Html5 / Html5 audio
and here I select this option:There is a code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here4.) I go to Adobe Edge animate CC 2014 and right-click on the project and select Actions open to "Stage".
and then I click on + sign and select creationComplete
This will open the window of the scene
Here I copy this code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here5.) then I click on + sign under the library > > video
and I add video to my computer disk SSD.
Video is called as video3.mp4Now I eddit code in the window of the scene (see above)
code will look like after editing like this:Can I change under the left-side px to %
6.) then I copy the Code in step backgroundvideo_1:
Then I select the Rectangle tool and mark the box (white box) and I click on the little icon of CAnd the box that takes place I type here backgroundvideo_1_mp4 autoplay
now when I use ctrl and enter I get only a gray box that does not play video.
What I am doing wrong?I drag and drop a video from the side straight to rectangle window and the side left, I clicked on loop playback and it started working as it should.
-
Part Muse 3rd video background module using
Hi all. I think buying this video module of bg (http://codecanyon.net/item/html5-video-youtube-background/1555660) to use for my page of destination in muse.
SE I just paste the html/css/jquery code in the Page Properties > metadata > HTML to the head?
I'm not a code guy.
Thank you.
Hello Salim,
If it is a code related to the metadata for the page or for SEO purposes, then it should go to the 'metadata' section If it's just a video component which is not for purposes of SEO, and you just want to add to the page for visitors to be able to see it, so you must add it using the object-> the option insert the HTML in Muse.
I hope this helps.
See you soon
Parikshit
-
How to you turn off auto-play the HTML5 videos in Safari?
How to you turn off auto-play the HTML5 videos in Safari?
I speak not of advertising videos. It seems that there is a new trend that sites add the AutoPlay videos as part of their normal textual content. It's really annoying to try to read the article and have this semi-connexes video game.
Is there a Safari Extension or a hidden setting I'm not about to stop video AutoPlay altogether?
Thank you
Stan
ForeverTangent wrote:
Is there a Safari Extension or a hidden setting I'm not about to stop video AutoPlay altogether?
There is a preference setting or an available extension.
-
Amazon HTML5 video player on Safari?
Today, I watched a video from Amazon in Safari 9.1.1 under El Capitan on my MacBook. Amazon played using Silverlight plug-ins, I had installed. However, a box came up that said the video would improve if I uses its HTML5 video player, that he says is compatible with Chrome (M42 version or newer), Firefox (version 47 or more recent), Edge Microsoft Internet Explorer (11 or newer on Windows 8.1 and later), on Windows 10 and Opera (version 31 or more recent).
Safari is remarkably absent from the list. Recent versions of Safari do not support HTML5?
Recent versions of Safari do not support HTML5?
Of course, it does. Amazon has chosen not to support Safari, for reasons known only to them.
-
Firefox always displays random lines while playing any HTML5 video.
Firefox always random poster while playing any HTML5 video.
Screenshot: http://i.imgur.com/8zSNOJ2.jpgVideos HTML5 work well only in full screen.
-
Play HTML5 video with JavaScript does not hide the overlay dimming video
I googled this problem and found nothing useful and also checked the area of support here and still nothing. I'm creating a webpage with HTML5 video. I made a layer with the video object that is hidden with CSS, until the user clicks on a link. When the user clicks on the link, I use a JavaScript function to display and play the HTML5 video object. Works fine except that Firefox keeps the overlay in place play button while playing my video! If I click on the overlay, the video stops. Then if I click again, the overlay disappears and the video resumes playback.
I realize there are solutions that can be pirated. But it is certainly a bug that the rest overlay in place after the start of the video via a JavaScript command. I hope that this problem finds its way to the right people at Mozilla for resolution.
Thank you
-DKCan you please update to Firefox 18.0.1 and see if the problem exists in a new profile? (13 is no longer supported)
Use the Profile Manager to create and delete profiles Firefox
If this happens again please give an example of site Web with the show and the screenshots of what should happen compared to what's going on
-
No sound when playing html5 video
Hello!
I have a html5 video that is great in all browsers, but there is no audio data in Firefox for Windows 3.6.25
Yes, I have updatet my server with the following MIME:AddType audio/ogg .oga
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType text/plain .srtHelp, please! I need to I get just before Christmas...
Hei fmdeveloper!
I thought about it: you must download the .htaccess file in the folder where you placed your index file. The information contained in the .htaccess file are the following:AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg OGGBUT: when you download the file .htaccess with a ftp software - you need to change your options for the ASCII Mode! DO NOT use binary Mode for download!
-
Original title: Blue Screen of Death (BSOD)
Hello im having a problem with my computer I try to reboot and I get BSOD saying internal error Planner video background
Here is my mini dump file:
https://onedrive.live.com/redir?RESID=60FEBF11B9A3D76! 4807 & authkey =! AGKWUp-ndI0XBgE & ithint = the file % 2cdmp
and here is my system info:
https://onedrive.live.com/redir?RESID=60FEBF11B9A3D76! 4810 & authkey =! AFloWJarqiE83QM & ithint = the file % 2cnfo
im hoping that this will let you know what is wrong or not
RW
This phenomenon was linked to your video driver (atikmpag.sys) /DirectX. I would completely remove the current driver and install the latest driver available.
-
Cannot open youtube HTML5 videos,
When you try to open a youtube HTML5 video, youtube screen comes up but the HTML5 white wheel just spins and the video never opens. I have watied for 5 minutes without success.
Hi Ogslov,
The below proposed article might help you.
http://www.YouTube.com/HTML5Bindu R - Microsoft Support
Visit our Microsoft answers feedback Forum and let us know what you think -
Hey guys I have a problem with HTML5 video. If the video is set to autorun, it is in its very well designated area. However, if it is not set to auto-run and I have trigger play via JavaScript, it opens the video fullscreen.
This is not my expectation. If anyone has experienced this before? How can I work around it? I tried * almost * all without success.
Thank you.
Device: BlackBerry Dev Alpha 10 B
OS: 10.0.9.1675
In short,
-
What version of the BlackBerry browser supports the HTML5 video element? Any estimate of the number of blackberry phones that support video?
The
Maybe you are looking for
-
Photosmart C5180 all-in-one hp c5180 p:
My c5180 is detained previously. If I want to print in black only it print if one of the color toner is empty or expired? If a cartridge is empty / expired no allhave be replaced?
-
KB2718704 guard tries to install but never does
My PC keeps trying to install KB2718704. Anyone know what it is for? He tried to install several times, but never does.
-
Dell Repository Manager Server Update Utility (SUU) plug-ins do not install
Hello.. I am trying to create a USB for my filing of server Dell SUU and whenever I'm trying to export my package, it says: "The required plugin is not found." "Click here to install the plugin. I click on the link to install and it starts to downloa
-
QML: To access variables defined outside of a list item to in a list component
Consider the following QML: import bb.cascades 1.0 {Page} content: {container {Label ID: topLabel text: «One» textStyle.size: 100.0 textStyle.color: Color.Blue } Button {} text: 'change two. onClicked: {}
-
Get a "0 x 80070057" failed to format Windows error when I try to clean up the format!
Hi guys... I have a Windows 7 system that has a 250 GB Western Digital SATA... I have not used this system as 4-5 months... Recently, I wanted to format install the system, so I used my CD of Installation of Windows 7 Ultimate x 64 to try a cleaning.