2016-12-26 3 views
0

Ok Übereinander so meine Website ein Video im Hintergrund des eigentlichen Inhalts hat, kann beispielsweise auf meiner Seite hier zu sehen das Video während das Video noch läuft? Ich habe versucht, es in JavaScript und in einigen der Tags zu integrieren, aber es hat immer die Formatierung meiner Webseite durcheinander gebracht.Bild ein Web-Video

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link href='https://fonts.googleapis.com/css?family=Poppins:400,600' rel='stylesheet' type='text/css'> 
    <title>The Spire Network | Home</title> 
</head> 
<body> 
<div class="header_wrapper"> 
    <div class="header">  
     <ul> 
     <li><a href="#" style="margin-right: 40px;">HOME</a></li> 
     <li><a href="http://thespire.buycraft.net" target="_blank" style="margin-right: 40px;">STORE</a></li> 
     <li><a href="http://www.thespire.net/forums/" target="_blank" style="margin-right: 40px;">FORUMS</a></li> 
     </ul> 
    </div> 
    <div class="logo"> 
     <a href="http://www.thespire.net/forums"> 
     <img src="spirelogo.png" alt="LOGO" height="120px" width="120px" style="margin-left: 50px; margin-top: -25px; text-decoration: none; color: white;"> 
     </a> 
    </div> 
</div> 

<div id="subheader" class="section bot light"> 
    <div class="info"> 
    </div> 
    <video poster="background.jpg" autoplay loop class="bgimage"> 
     <source src="opvp.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    </video> 
</div> 

<div class="container"> 
     <div class="section both light"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_4_of_4"> 
        <h1>Welcome to The Spire Network!</h1> 
        <p>The Spire Network is one of the most ambitious servers in all of Minecraft. We have a wide range of plugins and features that will keep you greatly entertained! We also offer a wide-range of donation perks which are available on our donation page which you can purchase to support the server and get yourself some awesome rewards for showing your appreciation and supporting us in this great endeavor!<br>Why not check out The Spire Network by placing IP address found below into your Minecraft Client!</p> 
        <input type="text" value="mc.thespire.net" class="address_input" readonly></input> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both dark"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_2_of_4 left"> 
        <h1>Get the most of the server with ranks!</h1> 
        <p>Ranks in The Spire Network are the things that define you from other players, they show that you individually have stepped up and supported the server by donating! If you are interested in supporting the server, click the "Donate Now" button to get started!</p> 
        <a href="http://thespire.buycraft.net" target="_blank" class="call_to_action pink">Donate now</a> 
        </div> 
        <div class="col span_2_of_4"> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both light"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_2_of_4"> 

        </div> 
        <div class="col span_2_of_4 left"> 
        <h1>Looking for support?</h1> 
        <p>Didn't recieve your donation? Did you get banned without any reason or for something you didn't do? Did someone harass you or bully you and wasn't punished for it? Visit our TeamSpeak or click the button below to contact a member of staff about the problem you have and we will be more than happy to help.</p> 
        <a href="http://www.thespire.net/forums" class="call_to_action green">Get help</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both dark"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_4_of_4 center"> 
        <h1>Got a great idea for our server?</h1> 
        <p>Ideas are great for the server! New ideas open up many different paths for the server and give you, the player, a new objective to aim for! Suggestions can be anything from new plugin suggestions to ways our website could be improved! Click the button below to send a recommendation for the server!</p> 
        <a href="#" class="call_to_action blue">Submit your idea</a> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 
</body> 
</html> 

Antwort

1

ich, dass Sie ein div info genannt haben sehen können:

<div class="info"> </div> 

, wenn Sie diese CSS hinzufügen:

.info { 
    background: rgba(0, 0, 0, 0) url("http://www.thespire.net/spirelogo.png") no-repeat scroll 0 0; 
} 

Wenn Sie voll wollen abzudecken Der Schieberegler benötigt dann mehr Anpassungsmöglichkeiten.