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>
Related
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 am using HTML5 video to stream a web camera and I am wondering is it possible to place a logo inside HTML5 video stream?
<div id="streaming">
<video id="webcam" autoplay></video>
</div>
This could be achieved by adding an image element into the html's body section and placing it accordingly (which suits the best for your need) using css.
ᴅᴇᴍᴏ
.logo {
position: absolute;
top: 12px;
left: 18px;
}
<body>
<div id="streaming">
<video id="webcam" src="https://istack.000webhostapp.com/psy.mp4" height="219" autoplay></video>
<img src="https://istack.000webhostapp.com/yt.png" width="40" class="logo">
</div>
</body>
I'm using this plugin to display a video grid. Clicking a grid item pops up a video container where you can view a video. The issue I'm having using this plugin is, it works great for videos with aspect ratio 16:9. However, videos with height greater than the width, the video container stretches vertically and goes off screen and the video looks choppy and zoomed. How do I fix the size of the container so the video doesn't get stretched.
Here's the HTML for the video container:
<div class="cbp-popup-wrap cbp-popup-lightbox cbp-popup-lightbox-isIframe cbp-popup-ready" data-action="close" style="display: block;"><div class="cbp-popup-content">
<div class="cbp-popup-lightbox-title">
<a href="/video/179/sdvsdd.aspx">sdvsdd
<div class="cbp-popup-lightbox-iframe">
<video controls="controls" height="auto" style="width: 100%">
<source src="/stream/stream.ashx?f=p1b0aqijn7115fsud1o2n9m53i83_5.mp4&u=kahmed&max=3000" type="video/mp4">Your browser does not support the video tag.</video>
</div>
</a>
</div>
</div>
<div class="cbp-popup-loadingBox">
</div>
<div class="cbp-popup-navigation-wrap">
<div class="cbp-popup-navigation">
<div class="cbp-popup-close" title="Close (Esc arrow key)" data-action="close"></div>
<div class="cbp-popup-next" title="Next (Right arrow key)" data-action="next" style="display: block;">
</div>
<div class="cbp-popup-prev" title="Previous (Left arrow key)" data-action="prev" style="display: block;">
</div>
</div>
</div>
</div>
Here's what the video with height greater than width looks like:
Video with the right size looks like this (which is what I want for the above video)
If I make the height of <video> 100%, the video disappears. Setting it to a fixed height shrinks the video but the container stays the same size as shown below:
The guy from support instructed me to use the below property:
.cbp-popup-lightbox-isIframe .cbp-popup-content {
width: 35% !important;
}
Which makes the video look as below
But this is not what I want. I want the container to remain the fixed size and make the video fit into the container. I have been stuck on this for a while now and haven't figured out how to do it.
Any help or suggestion is appreciated.
Try this:-
<video width="400" height="300" ...
<iframe width="400" height="300" ...
<object width="400" height="300" ...
<embed width="400" height="300" ...
link:-https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
or
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Bootstrap offers some classes allowing you to keep your videos within their container and with the correct dimensions. Those classes are embed-responsive and then either embed-responsive-16by9 or embed-responsive-4by3.
See this.
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 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.