Databases
StackOverflow2013
Postsdbo
POFullscreen video in background
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFullscreen video in background
    primarykey
    data
    text
    <p>Good day. I have tried to find a way to apply the full screen video in the background like on this page here: <a href="https://www.spotify.com/pl/video-splash/?utm_source=spotify&amp;utm_medium=web&amp;utm_campaign=start" rel="nofollow">spotify</a>. I assume it can be done in HTML5, however I am trying to follow some instructions from stackoverflow and it doesn't work for me. Obviously I don't want the timeline and other controls on the video, just simple plain video in the background. So far I was trying to use this:</p> <p>jsFiddles underneath the code</p> <pre><code>&lt;style&gt; #body{position:absolute; width:100%; height:100%} #myvideo{position:relative; top:0; left:0; width:100%; height:100%; z-index:-999;} #fullpage{width:80%; margin:0 auto; background-color:#900; z-index:100;} &lt;/style&gt; &lt;video width="100%" height="100%" autoplay="autoplay" id="myvideo"&gt; &lt;source src="http://www.pete.dj/video/video.webm"&gt;&lt;/source&gt; &lt;source src="http://www.pete.dj/video/video.mp4"&gt;&lt;/source&gt; &lt;/video&gt; &lt;script language="javascript"&gt; var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } &lt;/script&gt; &lt;div id="fullpage"&gt; content goes here &lt;/div&gt; </code></pre> <p>but it didn't work well. Here is what is wrong:</p> <ol> <li>video plays full height, doesn't being stretched or resized to cover the whole width of the screen</li> <li>video plays OK on chrome, but it doesn't on other browsers, what could be the reason? I thought html5 allows to play on all browsers. I've got a feeling it's not a matter of codecs or the files itself. Can it be caused by coding? jsFiddle here: <a href="http://jsfiddle.net/tucado/SSf5F/" rel="nofollow">fiddle1</a></li> </ol> <p>after I've managed to fix the issue with width of the video - then it doesn't act like a background, as scrollbars appeared. What can I do to get rid of scrollbars caused by video? I want them only if the actual #fullpage requires it. Unfortunately also #fullpage is behind the background in this case... instead of on top of it here is a fiddle for this one: <a href="http://jsfiddle.net/tucado/SSf5F/1/" rel="nofollow">fiddle2</a></p> <p>the actual website here: <a href="http://www.pete.dj/videotest.html" rel="nofollow">video test</a></p> <p>Thank you for your help and time.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPiotr Ciszewski
    1. USPiotr Ciszewski
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    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
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFullscreen video in background
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POFullscreen video in background
      1. USstvnrynlds
      1. VTFavorite
    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