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>
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>
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'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'm trying to embed a video inside an image, the challenge is that the page is responsive. The video looks in place on full screen, however it moves out of the box when resolution changes.
So I want the video to be inside the image frame at all sizes. Should I use #media or is there another way?
<div class="col-md-4">
<img class="img-responsive" style="width:344px;height:780px"
src="Images/mywork-images/cicis/cicis-mobile.jpg">
<div class="player">
<iframe src="https://player.vimeo.com/video/139805324"
width="290" height="290" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>
</div>
</div>
.player{
position: relative;
height: 0;
bottom: 565px;
left: 21.3%; /* 110px */
}
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.