The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background Video not in the center
Cockroach
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 6 2016, 08:04 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reus
post 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%;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2017 - 09:30 PM