2017-02-15 24 views
0

Garry's Modサーバー用の音楽付きのカスタム読み込み画面を設定しようとしています。私は本当に大きな問題を抱えていますが。 YouTubeのリンクを埋め込むと、画面の上端に約16ピクセルが追加され、大きな空白が表示されます。 YouTubeの埋め込みコードは0x0 pxに設定されているので、これを理解することはできません。今日はコードを見て2,3時間過ごしました(ほとんどが別のユーザーによってオープンソースになっています。私は何も見つけることができません。助けてください!また、自動再生時にビデオのデフォルト音量を制御する方法を知っている人がいるかどうか聞いてみたいと思います。音量が大きすぎます。ここでは、(ちょうどより多くのものを変更する前に、マージン・エラーを整理したい、まだ終了していない)を使用される実際のロード画面へのリンクです:http://lawsofdestruction.nn.pe.loading.lawsofdestruction.nn.pe/LoadingScreen/ゲームサーバーのローディング画面を設定しようとしています

そしてここでは、コードは次のとおりです。

<!DOCTYPE html> 
    <!--  
    AUTHOR: Xonos 
    STEAM NAME: frag51richardo 
    I hope you like it! :) 
    --> 
<!--[if lt IE 7 ]><html class="ie ie6" lang="en" class="no-js"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en" class="no-js"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en" class="no-js"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <title>Loading</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta name="description" content="Parallax HTML One-Page Template for Agency and Personal"> 
    <meta name="author" content="The Develovers"> 

    <!-- Styles 
     font-family: 'Lobster', cursive; 
     font-family: 'Pacifico', cursive; 
     font-family: 'Kaushan Script', cursive; 
     font-family: 'PT Sans', sans-serif; 
    --> 
    <link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Lobster|Pacifico|Kaushan+Script|PT+Sans' rel='stylesheet' type='text/css'> 
    <!--<link href="assets/css/main.css" rel="stylesheet">--> 
    <link href="assets/css/glyphicons.css" rel="stylesheet"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <link href="assets/css/animate.css" rel="stylesheet"> 
    <link href="assets/css/global-style.css" rel="stylesheet"> 

    <!-- JAVASCRIPT --> 
    <script src="assets/js/jquery-2.1.0.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <style> 
     td { 
      padding:5px!important; 
      color:#FFF; 
     } 
     .no-padding { 
      padding:0px!important; 
     } 
     .no-margin { 
      margin:0px!important; 
     } 
     .workshopItemPreviewImage { 
      max-width:100%; 
      text-align: right; 
      border:2px solid #FFF; 
     } 
     .workshopItemTitle { 
      color:#FFF!important; 
      font-size:15pt!important; 
      text-align:left; 
      font-family: 'Kaushan Script', cursive; 
      margin-bottom:0px!important; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .workshopItemShortDesc { 
      display:none; 
     } 
     .fileRating { 
      display:none; 
     } 
     .workshopItemAuthor { 
      padding-left:10px!important; 
      color:#fff!important; 
     } 
     .workshopItemAuthorName { 
      color:#fff!important; 
     } 
     .workshopItemAuthorName a { 
      background-color:#fff!important; 
      border-radius:5px!important; 
      padding-left:3px!important; 
      padding-right:3px!important; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .workshopItemAuthor, workshopItemAuthorName, workshopItemAuthorName a { 
      font-size:10pt!important; 
      text-align:left; 
      font-family: 'Lobster', cursive; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .circular img { 
      width: 100px; 
      height: 50px; 
      border-radius: 75px; 
      -webkit-border-radius: 75px; 
      -moz-border-radius: 75px; 
      /*background: url(http://link-to-your/image.jpg) no-repeat;*/ 
     } 
     .text-white { 
      color:#FFF; 
     } 
     .hdr, .hdr span { 
      font-family: 'Lobster', cursive!important; 
      font-size: 22pt; 
     } 
     .hdr2, .hdr2 span { 
      font-family: 'Kaushan Script', cursive; 
      font-size: 18pt!important; 
     } 
     .hdl { 
      font-family: 'Pacifico', cursive; 
      font-size: 16pt!important; 
     } 
     .reg tr td { 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .text-left { 
      text-align: left; 
     } 
     .txt-shadow, .txt-shadow span, .txt-shadow i, .txt-shadow strong, .txt-shadow p { 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .infobox { 
      background: rgba(144,144,144,0.4); /* 40% opaque red */ 
      -webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -moz-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      box-shadow:   inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
     } 

     .margintop { 
      margin-top: 24px; 
     } 

     .loadbarfx { 
      -webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -moz-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      box-shadow:   inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
     } 
    </style> 
</head> 
<body id="top" class="no-margin no-padding margintop" > 
    <object style="height: 0px; width:0px;"> 
     <embed src="http://www.youtube.com/v/0O-QKo2SIuU?version=3&autoplay=1&loop=1" type="application/x-shockwave-flash" allowScriptAccess="always" width="0" height="0"> 
    </object> 
<div style="position: fixed; z-index: -99; width: 100%; height: 100%"> 
    <?php//$videolink = '0O-QKo2SIuU&t'; ?> 
    <!--<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/<?php //echo $videolink; ?>?autoplay=1&controls=0&loop=1&playlist=<?php //echo $videolink; ?>"></iframe>--> 
    <iframe frameborder="0" height="100%" width="100%" src="./assets/wallpapers/module.wallpapers.php"></iframe> 
</div> 
<div class="col-xs-12" style="position:absolute;top:5px;left:0;position:absolute;overflow:hidden!important;"> 
    <div class="col-xs-12 text-center"> 
     <img src="logo.png" style="max-width:30%;"/></br> 
    </div> 
    <div class="col-xs-4 infobox"> 
     <table style="width:100%;" class="reg"> 
      <tr><td colspan=2 class="text-center hdr"><i class="fa fa-legal" style="color:#D31E1B;"></i> How to get Banned<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bed"></i></td><td>Prop Pushing & Spamming</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-tachometer"></i></td><td>Committing Douche Baggery</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-university"></i></td><td>Bothering Players</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-microphone-slash"></i></td><td>Mic Spamming</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-heartbeat"></i></td><td>Annoying or Lag Inducing Builds</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-frown-o"></i></td><td>Any form of Abuse</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-meh-o"></i></td><td>Lacking of Common Sense</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-chain-broken"></i></td><td>Crashing Server on Purpose</td></tr> 
      <tr><td colspan=2 class="text-white text-center hdr"><i class="fa fa-check-circle" style="color:#24AA22;"></i> Acceptable<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bullseye"></i></td><td>PVP</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-mars-double"></i></td><td>Adult Content</td></tr> 
      <tr><td colspan=2 class="text-white text-center hdr"><i class="fa fa-thumbs-o-up" style="color:#225FAA;"></i> Encouraged<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-cogs"></i></td><td>Wiremod/ACF Builds</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-code"></i></td><td>Impressive & Original E2</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bug"></i></td><td>Assistance in Finding Addon Bugs</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-question-circle"></i></td><td>Teaching Wiremod & Expression 2</td></tr> 
     </table> 
    </div> 
    <div class="col-xs-4"> 
     <div class="col-xs-12"> 
      <table style="width:100%;" class="reg"> 
       <tr><td class="text-white hdr"><i class="fa fa-map-marker" style="color:#D12112!important;"></i> Server Location: <span style="color:#1F6FD1!important;">Houston, TX</span></td></tr> 
       <tr><td class="text-white hdl" colspan=2>Note: Equipping a weapon removes god-mode and enables pvp. You must die to re-gain godmode.</td></tr> 
       <tr> 
        <td class="text-white" colspan=2> 
         <p><strong><u>Updates</u>:</strong></p> 
         <p>Added Sub-Material Tool for new feature added in March Update.</p> 
         <p>SCARS is currently disabled until the author fixes it (it's causing constant server crashes</p> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="col-xs-12 infobox"> 
      <table style="width:100%;" class="reg"> 
       <tr><td colspan=3 class="text-white text-center hdr"><i class="fa fa-cubes text-primary"></i> Server Operators<td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc02.deviantart.net/fs70/f/2014/341/1/2/simple_crown_bullet_by_slush_bee-d892v68.png"</td><td>TheIpodk9</td><td>Owner</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="https://forums.alliedmods.net/images/smilies/bee.png"></img></td><td>Developer</td><td>Cluelesshobo</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc04.deviantart.net/fs71/f/2015/059/b/1/penis_pixel_by_gaaddammit-d8jwkyb.png"></img></td><td>Mortimer McMire</td><td>Munch Blocker</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://img4.wikia.nocookie.net/__cb20120430113153/clubpenguin/images/b/bb/Moderator_badge_15px.png"></img></td><td><em>❈</em>AG<em>❈</em>Tjroehr</td><td>Super Admin</td></tr> 
      </table> 
      <div class="col-xs-12" style="border-top:1px dotted #CCC;"> 
       <span class="hdr2 text-white txt-shadow"><i class="fa fa-download" style="color:#FFF!important;"></i> <span id="loadingHdr" style="color:#FFF!important;">Validating Workshop Collection ...</span></span> 
       <div class="progress progress-sm progress-striped active"> 
        <div id="progressbar" class="progress-bar progress-bar-striped txt-shadow" style="width: 0%"></div> 
       </div> 
       <span id="subtext1" class="text-white" style="color:#FFF!important;"></span> 
       <span id="subtext2" class="text-white" style="color:#FFF!important;"></span> 
       <span id="subtext3" class="text-white" style="color:#FFF!important;"></span> 
      </div> 
     </div> 
     <div class="col-xs-12 infobox" style="margin-top:10px!important;"> 
      <p class="text-white hdr txt-shadow" style="padding:5px;"><i class="fa fa-user-secret" style="color:#F4CB13!important;"></i> How to become an Admin</p> 
      <span class="text-white txt-shadow" style="padding:5px;">Help Xonos find & resolve bugs in addons that can potentially crash the server. You must be mature and willing to help manage the server with a willingness to help with management in general. Typically there is an age requirement of 17+. <strong>No "<i>Can I haz adminz plzzz</i>"</strong>.</span> 
     </div> 
     <div class="col-xs-12 infobox" style="margin-top:15px!important;"> 
      <p class="text-white hdr txt-shadow" style="padding:15px!important;"><i class="fa fa-flask" style="color:#AD4CF7!important;"></i> About The Server</p> 
      <span class="text-white txt-shadow" style="padding:15px!important;">This server is all about building and it is recommended that you constantly back up your builds. Gmod tends to crash and so do servers with many addons. We tend to focus more on wiremod builds however you are encouraged to build whatever it is that you want. If there are limitations that you need lifted, ask an admin and they can raise these limits for you.</span> 
     </div> 
    </div> 
</div> 
    <script> 
     var totalfilez 
     //Gets initial total files needed. 
     function SetFilesTotal(total) { 
      totalfilez = total; 
      window.totalfiles = total; 
      $('#subtext3').empty().append(total+' files found.'); 
     } 
     //Update Progress Bar 
     function SetFilesNeeded(needed) { 
      window.filesleft = needed; 
      $('#subtext2').empty().append(needed+' files needed.'); 
      if(needed < 1) { 
       var neededz = window.totalfiles; 
      } else { 
       var neededz = needed; 
      } 
      var percent = Math.ceil((((window.totalfiles-neededz)/2)/(window.totalfiles/2))*100); 
      if(!isNan(percent)) { 
       $('#progressbar').css({ "width" : percent+"%"}); 
       $('#progressbar').empty().append(percent+"%"); 
      } 
     } 
     //Update loading header text. 
     function SetStatusChanged(status) { 
      $('#loadingHdr').empty().append(status); 
      /* 
      Retrieving server info... 
      Getting addon info for #------ 
      Found '--' 
      Mounting Addons 
      Workshop Complete 
      Sending client info... 
      */ 
      if(status == 'Retrieving server info...') { 
       $('#progressbar').css({ "width" : "10%"}); 
       $('#progressbar').empty().append("Initializing ..."); 
      } 
      if(status == 'Mounting Addons') { 
       $('#progressbar').css({ "width" : "55%"}); 
       $('#progressbar').empty().append("55%"); 
      } 
      if(status == 'Workshop Complete') { 
       $('#progressbar').css({ "width" : "89%"}); 
       $('#progressbar').empty().append("89%"); 
      } 
      if(status == 'Sending client info...') { 
       $('#progressbar').css({"width" : "100%"}, 15000); 
       $('#progressbar').empty().append('Finalizing ...'); 
      } 
     } 
     //Downloading file event. 
     function DownloadingFile(fileName) { 
      $('#subtext1').empty().append('Obtaining '+fileName+'.</br><b>'+window.filesleft+'</b> out of <b>'+window.totalfiles+'</b>'); 
     } 
    </script> 
    <!-- Server Workshop Collection --> 
    <div class="col-xs-12" style="overflow:hidden;position:absolute!important;bottom:25px;"> 
     <?php 
     include 'simple_html_dom.php'; 
     $url = 'http://steamcommunity.com/sharedfiles/filedetails/?&format=json&id=124102726'; 
     $html = file_get_html($url); 
     foreach($html->find('.collectionItem') as $element) { 
      $workshop .= '<div class="workshopAddon col-xs-4 text-center no-padding" style="display:none;">'; 

      foreach($element->find('.workshopItemPreviewHolder') as $previewImg) { 
       $img = '<div class="col-xs-3 no-padding text-center circular">'.$previewImg->innertext.'</div>'; 
      } 

      foreach($element->find('.workshopItemTitle') as $displayName) { 
       $title = '<p class="workshopItemTitle">'.$displayName->innertext.'</p>'; 
      } 

      foreach($element->find('.workshopItemAuthor') as $displayName) { 
       $author = '<p class="workshopItemAuthor">'.$displayName->innertext.'</p>'; 
      } 


      $workshop .= $img.' 
       <div class="col-xs-9 no-padding"> 
       '.$title.$author.' 
       </div> 
      </div>'; 
     } 
     echo $workshop; 
     ?> 
     <script> 
       var animationIn = 'fadeIn'; 
       var animationOut = 'fadeOut'; 
       var interval = 1500; 
       var pass = 1; 
       $('.workshopAddon').sort(function(){ 
        return (Math.round(Math.random()) - 0.5); 
       }).each(function() { 
        var e = $(this) 
        setTimeout(function() { e.show("fast").addClass('animated '+animationIn); }, interval); 
        setTimeout(function() { e.removeClass(animationIn).addClass(animationOut).delay(2000).hide("fast"); }, (interval+6000)); 
        if(pass <= 2) { 
         interval = interval+1000; 
        } else { 
         pass = 0; 
         interval = interval+9000; 
        } 
        pass = pass+1; 
       }); 

     </script> 
    </div> 
</body> 
</html> 
+0

ブートストラップは、それはユーチューブのための独自の埋め込みのしているこの形式をお試しください。< - 16:9のアスペクトラットIO - >

< - 4:!3のアスペクト比 - >
mlegg

+0

@mlegg申し訳ありませんが、私はまだ、私はコードであることを置けばいいのこれに新しいビット、よ?そして、助けてくれてありがとう。サーバーをチェックアウトする場合は、Lawsofdestruction.nn.peのフォーラムをチェックしてください。 – user7566155

答えて

0

を使用し、この

<object width= "0" height="0"><param name="movie" value="http://www.youtube.com/v/https://youtu.be/0O-QKo2SIuU&theme=light&loop=1&autohide=1&playlist=https://youtu.be/0O-QKo2SIuU"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/https://youtu.be/0O-QKo2SIuU&theme=light&loop=1&autohide=1&playlist=https://youtu.be/0O-QKo2SIuU" type="application/x-shockwave-flash" allowfullscreen="true" width="0" height="0" allowscriptaccess="always"></embed></object>

関連する問題