Help - Search - Members - Calendar
Full Version: Background Video not in the center
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
Cockroach
I have some problems with my video background it doesent ggo to the center like it should be!

could someone help me out

CODE
<div id="SITE_BACKGROUND" class="siteBackground" style="position: absolute; top: 0px; height: 100px; width: 100px;" data-reactid=".0.$SITE_BACKGROUND">
  <div id="SITE_BACKGROUND_previous_" class="siteBackgroundprevious" data-reactid=".0.$SITE_BACKGROUND.$noPrev">
    <div id="SITE_BACKGROUND_previousImage_" class="siteBackgroundpreviousImage" data-reactid=".0.$SITE_BACKGROUND.$noPrev.0"></div>
    <div id="SITE_BACKGROUNDpreviousVideo" class="siteBackgroundpreviousVideo" data-reactid=".0.$SITE_BACKGROUND.$noPrev.1"></div>
    <div id="SITE_BACKGROUND_previousOverlay_" class="siteBackgroundpreviousOverlay" data-reactid=".0.$SITE_BACKGROUND.$noPrev.2"></div>
  </div>
  <div id="SITE_BACKGROUND_current_c1v64" style="top:0;height:100%;width:100%;background-color:rgba(93, 10, 67, 1);display:;position:fixed;" class="siteBackgroundcurrent" data-reactid=".0.$SITE_BACKGROUND.$c1v64">
    <div id="SITE_BACKGROUND_currentImage_c1v64" style="position: absolute; top: 0px; height: 100%; width: 100%; opacity: 1; background-image: url("https://static.wixstatic.com/media/11062b_d013b164dadb47ec8e746ab178aacfbbf000.jpg/v1/fill/w_1920,h_1080,al_c,q_85/11062b_d013b164dadb47ec8e746ab178aacfbbf000.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;"
      data-type="bgimage" class="siteBackgroundcurrentImage" data-reactid=".0.$SITE_BACKGROUND.$c1v64.$background_currentImage_fixed" data-image-css-background-size="cover" data-image-css-background-position="center center" data-image-css-background-repeat="no-repeat"></div>
    <div data-quality="1080p" style="position: relative; min-width: 1628px; min-height: 916px; top: 0px; left: -508px;" class="siteBackgroundcurrentVideo" id="SITE_BACKGROUNDcurrentVideo" data-reactid=".0.$SITE_BACKGROUND.$c1v64.1"><video loop="1" muted="1" autoplay "1" preload="auto" width="100%" height="100%" style="visibility: visible;" id="SITE_BACKGROUNDcurrentVideovideo" class="siteBackgroundcurrentVideovideo" data-reactid=".0.$SITE_BACKGROUND.$c1v64.1.0"><source src="http://video.wixstatic.com/video/11062b_d013b164dadb47ec8e746ab178aacfbb/1080p/mp4/file.mp4" type="video/mp4" id="SITE_BACKGROUNDcurrentVideomp4" class="siteBackgroundcurrentVideomp4" data-reactid=".0.$SITE_BACKGROUND.$c1v64.1.0.0"><source src="http://video.wixstatic.com/video/11062b_d013b164dadb47ec8e746ab178aacfbb/1080p/webm/file.webm" type="video/webm" id="SITE_BACKGROUNDcurrentVideowebm" class="siteBackgroundcurrentVideowebm" data-reactid=".0.$SITE_BACKGROUND.$c1v64.1.0.1"></video></div>
    <div id="SITE_BACKGROUND_currentOverlay_c1v64" style="position:absolute;top:0;width:100%;height:100%;background-image:url(https://static.wixstatic.com/media/0da768_880a3209e3744cd0a96b66835a01b8c5.png);background-attachment:fixed;" class="siteBackgroundcurrentOverlay"
      data-reactid=".0.$SITE_BACKGROUND.$c1v64.2"></div>
  </div>
</div>
pandy
That was a little hard to untangle, but positioning the video outside the window doesn't seem like a good idea.

Remove this and see if that helps.
CODE
left: -508px


You should probably either remove the default margin/padding browsers put on BODY. Top margin/padding is taken care of by the positioning, bu the left remains if this is all you've got. But maybe you've already done that.
Reus
Here's how I typically do background video, and how I did it for the stre.am landing page:

.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}

video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.