'HTML5 video positioning to the top

Does anyone know how to position the video content to the top, like "position: top" with background images?
I have a video that is 1920x1080px, but the div is currently using 1920x550px. I have tried to search the World Wide Web without any luck.

      <video playsinline autoplay muted loop>
          <source src="vid/vid_3.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>

Kindly,
Louis

htmlcssvideohtml5-video


Solution 1:[1]

My example moves the video picture position to the top of page.

It won't be obvious that the video picture is at top since the navbar will block the view of it. So in navbar (is <nav id="navbar" ... > setup code), to move it down for testing, add this to the tag setup:

style="top:40px"

example setup:

<nav id="navbar" 
class="navbar navbar-expand-lg top-navbar sticky is-sticky" 
data-toggle="sticky-onscroll" 
style="top:40px">

Then find the div with class="col-12 video-wrapper" and add to its "style" ...

top: -60px

try a setup like this:

<div class="col-12 video-wrapper" 
style="background-image:url('vid/still_vid_3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 550px;
opacity: 0.4; 
top:-60px">

<video playsinline="" autoplay="" muted="" loop="" controls="">
<source src="vid/vid_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</div>

Solution 2:[2]

Thanks for the reply. Unfortunately it didn't work, but I've managed to fix it by setting the height:

<video playsinline autoplay muted loop style="height: 1080px;">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VC.One
Solution 2 Louis Loeb

Related Questions