Background Video not in the center |
Background Video not in the center |
Cockroach |
Jul 6 2016, 06:17 AM
Post
#1
|
Group: Members Posts: 1 Joined: 6-July 16 Member No.: 24,394 |
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 |
Jul 6 2016, 08:04 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
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 |
Aug 24 2016, 02:52 AM
Post
#3
|
Group: Members Posts: 3 Joined: 23-August 16 Member No.: 24,691 |
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%; } |
Lo-Fi Version | Time is now: 25th September 2024 - 02:04 PM |