title: Setting video as div background and bring the text in front
body: <p>I want to set my text background as video. Upon my trying I am not able to bring the text in front. The text always hidden behind. Another issue is that the video background is not responsive in smaller screen and it covers the whole screen. More so, it seems that the video's frame width and height are removed (e.g. doesn't play in origianl width and height reatio).</p>
  <p>Could anyone please help me solving this problem?</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;container-fluid no-left-padding no-right-padding welcome-text video-content&quot;&gt;
     &lt;!-- Container --&gt;
     &lt;div class=&quot;container&quot;&gt;
        &lt;video autoplay muted loop&gt;
           &lt;source src=&quot;assets/videos/welcome_video.mp4&quot; type=&quot;video/mp4&quot;&gt;
        &lt;/video&gt;
        &lt;h2&gt;Hello, I want to display this text, and play the video on background.
        &lt;/h2&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.welcome-text {
      padding-bottom: 180px;
      padding-top: 180px;
  
  }
  .video-content{
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
  }
  video{
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  </code></pre>