Insert video in HTML

Question

Insert video in HTML

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm making a website that has a video on the cover. The problem is that the video is too loud, so I made the following resolution:

CSS Code

#video-container{
    height:85vh;
    overflow:hidden;
}
video{
    width: 100%;
    overflow:hidden;
}

HTML code:

<div id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="res/videos/video.mp4">
    </video>
</div>

I do not want edges to be seen next to the Video, that is to say that it occupies the whole screen by the sides but that it does not have 100% of its height since it leaves the screen in such case. On the one hand a solution would be a video with a format that suits for it, but I do not have a video of those dimensions and I have to look for life.

The idea is to make something similar to this: link

I would also like to put a few letters above the video but I do not know how it is done.

EDIT:

I add one thing that I have forgotten and that's the way it works on large screens, but when you put it on a vertical mobile screen, the space under the video is too big, and that's why I need to change what I have done.

html php css

asked by Pavlo B. 26.10.2016 в 16:58

source

2 answers

WebView in a Fragment? Simulate betting in PHP

score 1 · Answer 1

Here you can see it in full screen.

CSS:

body{
  position: relative;
  margin: 0;
}

#video-container{
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: absolute;    
}

video {      
    width: 100%;
}

p {
  position: absolute;
  top: 5%;
  left: 10%;
  color: #fff;
  font: 5vw fantasy, serif;
}

HTML:

<div id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="http://techslides.com/demos/sample-videos/small.mp4">
    </video>
    <p>Lorem ipsum</p> <!-- Texto encima del video -->
</div>

score 0 · Answer 2

try it like that

<header id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="res/videos/video.mp4">
    </video>
</header>

in your css

header{
    width: 100%;
    height : 100%;
    overflow:hidden;
}