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>
Related
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;
}
As seen in new Google Chrome updates, we can see the download button for embedded audio/video in HTML pages. I want to show the same in Firefox & edge browsers.
How can I achieve this?
you can't have the same exact thing unless you create it yourself and disable the download button for Chrome so it'd look consistent in all browsers.
.download{
height: 45px;
width: 45px;
position: relative;
top: -30px;
left:-55px;
}
<div class="container">
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<a href="https://www.w3schools.com/html/mov_bbb.mp4" target="_blank" download><img class="download" src='https://cdn1.iconfinder.com/data/icons/hawcons/32/698392-icon-129-cloud-download-128.png'/></a>.
</div>
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>