I'm displaying my webcam into html5 video tag as follows:
<video id="myWebCamVideo" muted autoplay></video>
The webcam resolution is 1920x1080px. The point is I want to display it as follows:
<div id="divVideo" class="col-lg-4 col-md-4 mt-3 text-center ml-auto mr-auto">
<video id="myWebCamVideo" muted autoplay></video>
</div>
But the video tag is bigger than col-lg-4 with. Is possible to display the video tag with HD in a smaller div? Or always the video tag needs the px selected?
Kind regards
<div id="divVideo" class="col-lg-4 col-md-4 mt-3 text-center ml-auto mr-auto">
<video id="myWebCamVideo" muted autoplay style="width: 100%;">
</video>
</div>
Give 100% width to video tag. it will set as per parent div width.
I hope it would be helpful.
Related
I am working on a website in which I want to place a video in html using boostrap 4. The video is in mp4 format.
The html code which I have tried/used in order to place a video is:
<header class="container border masthead_video text-white text-center">
<div class=""
type="video/mp4" autoplay="autoplay" loop="loop"></video>
</div>
<div class="row mt-5">
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
</div>
</div>
</header>
Problem Statement:
I am wondering if there is any predefined header class in bootstrap like we have navbar where we can place images and videos. Also, what changes I need to make in order to place a video here:
<div class=""
type="video/mp4" autoplay="autoplay" loop="loop"></video>
</div>
The docs detail embedding videos in html while using Bootstrap 4. Try replacing your video snippet with this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
The embed-responsive-16by9 means it's for 16:9 aspect ratios. There are other options like:
embed-responsive embed-responsive-4by3 for 4:3 ratios
embed-responsive embed-responsive-1by1 for 1:1 ratios
etc
I am trying to play a mp4 on the main page of my website. I have a sample mp4 below to test with ..... but I would like to keep it width 100% which is does, but remove a certain percentage of the top and bottom so I have a thinner video. Below keep it responsive but I need to reduce the top and bottom by say 10%
<div >
<div >
<div align="center" class="embed-responsive embed-responsive-16by9 " style="background-color:red;">
<video id="video01" autoplay loop class="embed-responsive-item"
style="background-color:green;">
<source src="http://elevationchurch.org/wp-content/uploads/2016/01/Website_GetInvolved_v3.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
I think SVG Masking is a solution. You can read about it here : http://svglab.com/exp/masking-video.html
I have made a responsive website using bootstrap, and I have a media page with an embedded video. My code for it is this...
<div class="col-lg-6 col-lg-offset-3">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="video/yellow-bend1.mp4" width="600"></iframe>
</div>
</div>
It displays fine on large screens, but when I visit using my mobile, the video opens and autoplays in my video app before the home page displays, and you have to close the app to see the site. Is there a way to keep it fixed on the media page on mobile displays?
This is my first experience embedding video, and all the answer Ive searched for seem to be asking the opposite of what I need.
Thanks
I found this that works:
<video autoplay=0 controls>
<source src="video/yellow-bend1.mp4" type="video/mp4" />
</video>
<div class="col-lg-6 col-lg-offset-3">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<video src="src="video/yellow-bend1.mp4"" controls></video>
</div>
</div>
I currently have a HTML video within a div that auto plays for desktop browsers. I'm trying to implement a fix that DISABLES the video for mobile and only displays the video POSTER in its place. I feel like it should be a simple fix, but I can't find any CSS or JS to do this.
Code below:
<div class="row">
<div class="col-1 no-padding">
<video loop muted autoplay poster="images/joe-rule/banner.jpg" class="width">
<source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
</video>
</div>
</div>
this is what I did
in html:
<div class="row">
<div class="col-1 no-padding">
<video loop muted autoplay class="width">
<source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
</video>
</div>
in js:
check if the page is loaded in mobile
if (isMobile) {
$(".col-1 no-padding").find('video').attr('poster', 'images/joe-rule/banner.jpg');
}
So that the poster will only be displayed in mobile.
you may need to search the use of "isMobile" or any other to check if the page is loaded in mobile.
I have multiple videos that I would like to be resized to it's parent bootstrap div in a grid format but the weird thing is that it's increasing the size of the col but not the video itself.
Here is a sample of how the code goes in the grid format. In my CSS file, the class gif-video width and height is both set to 300.
Here is an image representing my problem.
If i change the gif-video width and height to 100%, here is how it looks like. The size is correct but there are empty spaces as though the div got pushed down.
Here is an image representing this issue.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">
<source src=<%= gif.webmurl %> type="video/webm">
<source src=<%= gif.mp4url %> type="video/mp4">
</video>
</div>
</div>
</div>
Set max-height and max-width to div , some of video must been little bit bigger and maybe push paddings to right or bottom