The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Reus
post Aug 24 2016, 02:52 AM
Post #2





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

Posts in this topic


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: 28th March 2024 - 03:03 PM