title: Full Screen Video on Mobile Device
body: <p>Shown below is the code I'm using for my website. I have a video that displays full screen when on a bigger screen and I'd like the video to play full screen on a mobile device as well (even if a portion of the video gets cut off).</p>
  <p>If anyone knows of a way to make this happen, I'd appreciate you letting me know.</p>
  <p>Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en; jp;"&gt;
  &lt;body&gt;
  
  &lt;title&gt;言語の選択 - Select Language&lt;/title&gt; 
      
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;video src="photos/Home_Page/Home/Home_Page.mp4" autoplay loop muted playsinline width="100%;" style="z-index: 100px; overflow: hidden;"&gt;&lt;/video&gt;
   
  &lt;div class="relative"&gt;
  &lt;p style="text-align: left; font-size: 80px; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;"&gt;&lt;a href="Website_Home_Page.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 darkgray,-1px 1px 0 darkgray,1px -1px 0 darkgray,-1px -1px 0 darkgray;"&gt;小泉&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="absolute"&gt;
  &lt;p style="text-align: left; font-size: 29px; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;"&gt;&lt;a href="Website_Home_Page.html" style="text-decoration:none; color: black; opacity: .8; text-shadow:.5px .5px 0 #fff,-.5px .5px 0 #fff,.5px -.5px 0 #fff,-.5px -.5px 0 #fff;"&gt;Koizumi&lt;/a&gt;
  &lt;/div&gt;
      
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;p style="text-align: center; font-size: 30px; font-family: sans-serif; overflow: hidden;"&gt;&lt;a href="Website_Home_Page.html" style="text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;"&gt;&lt;b&gt;日本語 &lt;/b&gt;&lt;/a&gt; |  &lt;a href="Website_Home_Page_English.html" style="text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;"&gt;&lt;b&gt;English&lt;/b&gt;&lt;/a&gt;&lt;/p&gt;   
      
  &lt;style&gt;
      
  .relative {
      position: relative;
  }
  .absolute {
      position: absolute;
      left: 35px;
      top: 38px;
  }
      
  .video {
    position: fixed;
    text-align: center;
    left: 0;
    top: 0;
    z-index: 1;
  } 
      
  p {          
    color: white;
    text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
    font-size: 400%;
    margin: 50px;
    position: relative;
    z-index: 3;}
   
      
        
  &lt;/style&gt;    
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>