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>
Related
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
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>
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;">
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 an iframe inside Div in which i want to add video . I have added the URL path for the video correctly but not getting video on the screen neither i am getting any error on the browser console.Here is the HTML for the whole..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe width="420" height="315" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</iframe>
</div>
Please help me in displaying the video to my website ..Thanks..
You don't need to use iframe here, If you remove the iframe it will work, If you need the iframe from any reason you need to put "src" attribute in the iframe with link to the video.
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</div>
Make a separate HTML page (let's say second.html) containing the <video> element and now call that page within the iframe as follows: <iframe src="second.html" ... ></iframe>.
Hope it helps.
<video src="/video/demo.mp4" width="200" height="100" controls>
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
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>
I'm making a simple web page, and I wanted the first window to have a full screen playing video. I tried to embed it like this:
<div class="section active">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm">
Video not supported
</video>
and
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 69;
overflow: hidden;
}
The first frame shows up, but it doesn't start playing. The files are in their proper location. Why could this be? I'm using fullPage.js if it makes any difference.
Please check this link:
https://github.com/alvarotrigo/fullPage.js/issues/267
You will have to make use of the callbacks afterRender or afterLoad for it.
$.fn.fullpage({
afterRender: function(){
$('#video')[0].play();
}
});
Now you can find also an available example to download in the examples folder of the plugin.
Try this
<div class="section active">
<video id="video_background" autoplay loop muted preload="auto">
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm">
Video not supported
</video>