Databases
StackOverflow2013
Postsdbo
POSmall player appears in top-left corner before BigVideo.js loads
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSmall player appears in top-left corner before BigVideo.js loads
    primarykey
    data
    text
    <p>I am trying to implement <a href="http://dfcb.github.io/BigVideo.js/" rel="nofollow noreferrer">BigVideo.js</a> as the background-video behind a centered container in a Bootstrap 3.0.3-website.</p> <p>The sample-video is correctly playing, however, when the page is loading, a small player appears in the top-left corner, before the video finally plays:</p> <p><img src="https://i.stack.imgur.com/EL1C0.png" alt="enter image description here"></p> <p>If you check out <a href="http://dfcb.github.io/BigVideo.js/example-ambient-loop.html" rel="nofollow noreferrer">this example</a> in Firefox, you can see the distribution of the loading animation.</p> <p>I would like that this loading animation is centered and spans the whole background, before showing content and video. <a href="https://github.com/dfcb/BigVideo.js/issues/65" rel="nofollow noreferrer">This issue was reported before on GitHub</a>, however, without providing a satisfying, working solution.</p> <p>Unfortunately, my JavaScript-knowledge is very limited. I already implemented <a href="http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/" rel="nofollow noreferrer">PreLoadMe.js</a> to hide the loading process of BigVideo.js, but unfortunately the background video starts to load when PreLoadMe.js has finished. So the same effect takes place.</p> <p>I currently call the BigVideo-function in the following way, as described on the support site:</p> <pre><code>&lt;!-- BigVideo --&gt; &lt;script&gt; $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('http://vjs.zencdn.net/v/oceans.mp4', {ambient:true}); }); &lt;/script&gt; &lt;!-- Preloader --&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ $(window).load(function() { // makes sure the whole site is loaded $('#status').fadeOut(); // will first fade out the loading animation $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. $('body').delay(350).css({'overflow':'visible'}); }) //]]&gt; &lt;/script&gt; </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;!-- Preloader --&gt; &lt;div id="preloader"&gt; &lt;div id="status"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class="content-box" &gt; &lt;h1&gt;Ipsum Lorum&lt;/h1&gt; &lt;p class="lead"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>html, body { overflow: hidden; margin:0; padding:0; } .content-box { position: absolute; top: 50%; left: 50%; text-align: center; background-color: rgba(0,0,0,0.75); color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; z-index: 2; padding: 50px; width: 400px; height: 400px; margin: -200px 0 0 -200px; } #preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:99; /* makes sure it stays on top */ } #status { width:200px; height:200px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-image:url(../img/status.gif); /* path to your loading animation */ background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; /* is width and height divided by two */ } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload