I'm trying to display an image over a video (html5). If I put an instead of the video ... it works but when I put a the video is over the image :/ What could I do ?
<div class="videohead">
<video loop="loop" autoplay="autoplay">
<source src="img/video.mp4" type="video/mp4" />
<img src="img/video.png"/>
</video>
<img src="img/logo.png" class="logo"/>
</div>
.videohead
{
margin: 5px 0 0 1px;
}
.logo
{
margin-top: -155px;
}
Link: https://jsfiddle.net/kNMnr/1487/
Use position in CSS3 with z-index.
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">Logo</div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
#video_box {
position:relative;
}
#video_overlays {
position:absolute;
width:160px;
min-height:40px;
background-color:#dadada;
z-index:300000;
bottom:10px;
left:10px;
text-align:center;
}
you can provide the image with a certain z -index in css and set its position to absolute hope that helps...
Looks like the z-index is the problem here as the other user suggest, but just wanted to add. If you are tring to just display a picture before a video you could also use the poster attibute of the html5 video tag.
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
There is a simple video attribute that allows the use of pre-loaded images.
The "poster" attribute defines a poster image that is in place of the video.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
Related
I have added a video and an audio file to a webpage, however they don't seem to want to center.
The HTML code is:
<h2>Dedicated to Quality</h2>
<video height="210" class="center" controls="controls" poster="aboutus/poster.jpg">
<source src="aboutus/ucorp.mp4" type="video/mp4"/>
Your browser does not support the HTML5 video element.
</video>
<p>
For the audio of this webpage, use the audio controls below.
</p>
<audio class="center" controls="controls">
<source src="aboutus/voiceover.mp3" type:"audio/mp3"/>
Your browser does not support the HTML5 audio element.
</audio>
The CSS code is:
video.center
{
display: block;
margin-left: auto;
margin-right: auto;
}
audio.center
{
display:block;
margin-left:auto;
margin-right:auto;
}
So I have already added the display:block; CSS classes and have the margins set to auto.
According to the tutorial I am following, this should work.
Below I have attached what I am expecting vs. what I am getting (note: disregard the video thumbnails and sizes being different).
Expected Outcome vs Obtained Outcome.
Thanks in advance!
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 got a little trouble with video tag positioning. I need to put video element into image like foreground (picture in attachement). I used different css positioning tricks, but in this case nothing works fine. If I change video tag for some div element with different content, works good. I'm beginning to suspect tag video could be problem. I didn´t add css on purpose, I´m asking for you suggestions. Thanks
<div class="item active">
<img src="../public/images/xxx.png">
<div><video height=410px width:470px controls="controls">
<source src="https:xxxxxx" type="video/mp4" />
</video>
</div>
</div>
i think this can help you
img {
width: 100%;
height: 500px;
position: absolute;
}
video {
position: absolute;
left: 50%;
transform:translateX(-50%);
}
Try floating the image which will solve your issue.
Add style="width:100%; height:auto;float:left;" in image tag
<div class="item active">
<img src="../public/images/xxx.png" style="width:100%; height:auto;float:left;">
<div><video height=410px width:470px controls="controls">
<source src="https:xxxxxx" type="video/mp4" />
</video>
</div>
</div>
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>