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

    1.JPG

    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:

    2.JPG

    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 the project and select Actions open to "Stage".

    3.JPG

    and then I click on + sign and select creationComplete4.JPG

    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 here

    5.JPG

    5.) then I click on + sign under the library > > video

    6.JPG

    and I add video to my computer disk SSD.
    Video is called as video3.mp4

    Now I eddit code in the window of the scene (see above)
    code will look like after editing like this:

    7.JPG

    Can I change under the left-side px to %

    8.JPG

    9.JPG

    6.) then I copy the Code in step backgroundvideo_1:

    10.JPG


    Then I select the Rectangle tool and mark the box (white box) and I click on the little icon of C
    11.JPG

    And 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.jpg

    Videos 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
    -DK

    Can 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 .srt

    Help, 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 OGG

    BUT: 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!

  • Having a problem with my computer I try to restart and get BSOD saying internal error Planner video background

    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/HTML5

    Bindu R - Microsoft Support
    Visit our Microsoft answers feedback Forum and let us know what you think

  • Problem of HTML5 video

    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,

    video = document.getElementById("player");
    document.querySelector('#play').addEventListener('click', function () {
        if (video.currentTime === 0) {
            video.currentTime = 5;
        }
        video.play();
    }, false);
    

    An official flag in order to prevent the full-screen has been requested, but I hope that does the trick for now.

  • What version of the BlackBerry browser supports the HTML5 video element? Any estimate of the number of blackberry phones that support video?

    What version of the BlackBerry browser supports the HTML5 video element? Any estimate of the number of blackberry phones that support video?

    The

    https://developer.BlackBerry.com/HTML5/documentation/html_elements_2006657_11.html

Maybe you are looking for