title: Background video on ipad not fixed & href link on smartphone not working
body: <p>I have two issues with coding a website for ipad and smartphone (in my case, iphone 5s).</p>
  
  <ol>
  <li><p>In several browsers the code below works fine for a video background. <em>Did not check IE since I don't have a windows, but I'll worry about that later.</em><br>
  .<br>
  But, when displaying the website on ipad, the video is somewhere in the center of the WHOLE website (so it ignores safari's viewport completely, to see the background you have to scroll down, then you see it behind the content that's [correctly] placed there). The video doesn't 'scroll down with the user' (so that it essentially stays in the same place within the viewport, not the whole height of the website).</p></li>
  <li><p>When displaying the index page (with the 'continue to website' button) on a smartphone, the button / href link doesn't work. In other browsers it works (ipad / safari (laptop) / chrome / firefox). It doesn't do anything while tapping on the button.</p></li>
  </ol>
  
  <p>Is there any way to fix these issues?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video autoplay loop poster="http://demosthenes.info/assets/images/polina.jpg" id="bgvid"&gt;
      &lt;source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"&gt;
      &lt;source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  
  &lt;a href="main.html"&gt;
      &lt;div id="verder"&gt;
          &lt;p&gt;verder naar de website&lt;/p&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>video { 
      width: auto;
      height: auto;
      min-width: 100%;
      min-height: 100%;
  
      position: fixed;
      left: 0;
      bottom: 0;
      display:block;
      z-index: -100;
  
      background-color:#fff;
      background:url(../img/schrijven.jpg) no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      /*background-position: 30% 50%;*/
  }
  
  div#verder{ 
      height:60px;
      width:321px;
      background: rgba(0,0,0,0.3);
      color: white;
      margin: 0; padding: 5px;
      float: right;
      border:#ffffff solid 1px;
      border-radius:10px;
  
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
      position:absolute;
      bottom: 25px;
      right: 25px;
  }
  
  div#verder:hover{
      background: rgba(168,225,210,0.3);
  }
  
  div#verder:active{
      /* koraal background: rgba(249,164,151,0.3); */
      background: rgba(156,149,145,0.3);
  }
  
  div#verder a{
      text-decoration:none;
  }
  
  div#verder p{
      font-family:'open_sanslight';
      font-size:20px;
      line-height:50px;
      color:#ffffff;
      margin: 0; padding: 0;
      text-align: center;
  }
  </code></pre>
  
  <p>Full website can be found at <a href="http://www.divergencepr.nl/" rel="nofollow noreferrer">www.divergencepr.nl</a></p>
  
  <p><strong>Edit 1</strong>: Added two screenshots from my iPad, so that you can see what my issue exactly is. I don't think the video is playing either, but right now that can be because of my internet connection. I think that issue has to do with alignment, because when you go to other pages (that aren't as long), the background is visible, but there's a black bar above and below the image. But, when I change the <code>background-position</code> nothing changes on my ipad viewport.
  <img src="https://i.stack.imgur.com/zeDfU.png" alt="Landing page, no video or background visible">
  <img src="https://i.stack.imgur.com/ad4J9.png" alt="Scrolled down, there&#39;s the background!"></p>
  
  <p><strong>Edit 2</strong>: Tested the button on an android smartphone on chrome, button isn't working there either. Strange thing is that it DOES work on my ipad, while that is a 'mobile device' too?</p>