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

<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 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(",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="" type="video/mp4" id="SITE_BACKGROUNDcurrentVideomp4" class="siteBackgroundcurrentVideomp4" data-reactid=".0.$SITE_BACKGROUND.$c1v64.1.0.0"><source src="" 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(;background-attachment:fixed;" class="siteBackgroundcurrentOverlay"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Jul 6 2016, 08:04 AM
Post #2

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

Group: WDG Moderators
Posts: 18,648
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.
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
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 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
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 10th April 2020 - 03:17 PM