I have a video in the video tag and I need to add another video for the responsiveness, but I don't want it to be set as a background. I am using bootstrap 4 carousel.
Here is my HTML :
<div class="carousel-item active" >
<video autoplay loop muted id="myVideo">
<source src="videosource.mp4" type="video/mp4">
</video>
</div>
Here is my CSS :
.carousel-item{
height:100vh;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
"I need to add another video for the responsiveness"
"Because when the current video is viewed from mobile or template the main character is cropped out"
You could try resizing the video to always fit on screen.
Does something like the example code below help you to think of a new solution? Make it as new HTML page and then test the desktop window resizing and also test on mobile.
<!DOCTYPE html>
<html>
<style> .full-height-test { height: 95vh;} </style>
<body>
<div class="carousel-item active" >
<video controls autoplay muted id="myVideo" class="full-height-test" >
<source src="videosource.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
after read a lot of documents about this solution i can't resolve this problem, i want to show video with full width and custom height such as width='100%' height='100px'
<div class="row">
<div class="video-container">
<video preload="auto" loop="" autoplay="" muted="" width="700px" height="50px">
<source src="/uploads/MDclouds3-sunset.webmhd.webm"
type="video/webm">
<source src="/uploads/MDclouds3-sunset-H.264-for-VP.m4v"
type="video/mp4">
</video>
</div>
</div>
how can i do that? thanks in advance
You need to use 'object-fit' on the video.
Depending on what you need to do, object-fit: fill or object-fit: contain should do the trick:
https://codepen.io/manticorp/pen/jYXGRZ
note, if you want object-fit:cover you'll have to have a container whose dimensions are also width: 100%; height: 100px; and set overflow:hidden; on that.
Add this in your css section:
video {
width: 100% !important;
height: 100px !important;
}
I have some problems on HTML5 video when I make a page not app working on mobile. I want to put some words on video when video plays, but it seems the z-index not working on video. This problem have troubles me a long time, and I have searched on google, stackoverflow and css-tricks, not finding the right answer.
<div id="main_container">
<div id="danmu">小苹果小苹果小苹果</div>
<video id="video" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
#video{width:100%;position: relative;}
#danmu{position: absolute;width: 100%;left:0;top:0;color:red;z-index:10;}
#main_container { float: left; position: fixed; left:0; top:0;width:100%;}
I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions.
I did this using "poster" in the video tag like this:`
<div class="video">
<video id="videotest" poster="images/img.jpg">
<source src="images/bkg.mp4" type="video/mp4"></source>
Can't use videos here.
</video>
</div>
However, I would like the video to be the same size as the image. The video is 1280*720, and the image is 677-611.
I tried to use clip-path to adapt the video but it doesn't work, here is my CSS:
.video {
text-align:center;
margin:0 auto;
height:auto;
clip-path:inset(0 978px 611px 301px);
-webkit-clip-path:inset(0 978px 611px 301px);
}
I tried applying this style to .video, #videotest and source, it still didn't work as expected.
Is it impossible to use clip-path with videos in HTML5? If so, how can I do it, and if not, how can I make it work?
I will explain myself a little more:
I don't want the image to resize, keeping proportions or not, I just would like to cut off, for example, some pixels left and right, so the image in poster is exactly the same size as the video replacing it. Clip-path seemed to correspond to what I was looking for, but I can't get it to work.
Thanks.
Well Here is the code in HTML you add in the video tag poster="transparent.jpg" to call it by css background and preload="none" to make the poster visible then you make sure to add video's extension that works with the browsers in source tag inside the video tag Unfortunately I couldn't finger out extension that works with safari, It could works if you add the video as one extension to your source folder but I never try
.video {
background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat;
background-size: 677px 611px;
text-align:center;
margin: 0 auto;
width: 677px;
height:611px;
}
video {
width: 677px;
height:611px;
object-fit:inherit;
}
<div class="video">
<video controls="true" id="videotest" poster="transparent.jpg" preload="none">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
</div>
.svg-clipped-text {
-webkit-clip-path: url(#SVGID_2_);
clip-path: url(#SVGID_2_);
}
<video loop width="100%" height="100%" autoplay class="svg-clipped-text">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>
<div class="demo">
<svg height="0" width="0">
<clipPath id="SVGID_2_">
<path id="SVGID_3_" d="M770.5,483c3.1,12.8-2.2,30.7-11.8,39.7L498,770c-9.5,9.1-27.7,13.4-40.3,9.7L113.2,677.5
c-12.6-3.7-25.4-17.3-28.5-30L0.9,298c-3.1-12.8,2.2-30.7,11.8-39.7L273.4,11C282.9,2,301-2.4,313.6,1.3l344.5,102.1
c12.6,3.7,25.4,17.3,28.5,30L770.5,483z"/>
</clipPath>
</svg>
I want to place an image in front of html video. And here is my code so far:
<style>
video.videos {
background-image: url(image.png);
background-repeat: no-repeat;
z-index:1;
}
</style>
<video id="Video1" class="videos" >
<img src="image.png" align="absmiddle" style="z-index:2;" >
<source src="video1.mp4" type="video/mp4"></source>
Browser does not support HTML5. Video could not be loaded.
</video>
But using z-index does not make it working. I mean, the image still remains behind the video file. Is there a possibility to fix this? Maybe any other way?
Place it outside the video tags and use this style to position it:
top: 100px; left: 100px; z-index: 0; position: absolute;
Naturally, you'll need to adjust values for your specific application. If absolute positioning doesn't work for you, you can always use relative positioning, which can be more flexible. See JSFiddle for an example of positioning an image in front of a video.
What you mean with front of html video?
if it's the image poster, you can use this:
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>