I'm using the following snippet to embed a local video in a presentation made with xaringan in rmarkdown:
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
The video works fine, but it runs off the bottom of the slide (i.e., it's too tall), and I cannot get any resizing to stick. I've tried using percentages
<video>
<source src="video_name.mp4" type="video/mp4" height="50%">
</video>
And absolute size
<video>
<source src="video_name.mp4" type="video/mp4" height="100">
</video>
And the video height does not change. What am I doing wrong?
The height argument controls the size of the container, so in this case, that would go into the video tag:
<video width='50%'>
<source src="video_name.mp4" type="video/mp4" >
</video>
Related
Hello everyone I have a problem with this code:
<div class="small-mobile-container">
<div class="mobv">
<video style="position:sticky "; preload="true", playsinline , autoplay="autoplay" muted loop>
<source src="Pictures/Video 1.mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
The problem is that it is not playing in the Safari web browser.
I tried a bunch of solutions but nothing helped. I don't know even why but there's a button which I can press, and then the video starts.
(1) Try using a full path to video. (2) Also rename your MP4 file name to not have spaces.
Code should be something like this:
<div class="small-mobile-container">
<div class="mobv">
<video preload="true" playsinline="" autoplay="" muted="" loop="" style="position:sticky; width: 100%; height: auto;" >
<source src="https://mywebsite.com/Pictures/Video_1.mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
I have 3 videos for 3 different screen resolutions. I want to load the specific video for the shown resolution on page load and avoid loading the rest. Only 1 of 3 should be loaded.
For ios (using safari), autoplay needs to be present on page load for the videos to be shown without the controls. Even if I remove the autoplay attribute on page load, the entire video is being loaded.
On desktop, if I add autoplay after page load, the videos aren't being fully loaded.
How can I get only the videos which are visible to be fully loaded on page load?
Here's a simple example of the code:
<div>
<video muted="" class="col-md-12 d-none d-lg-block" poster="">
<source type="video/mp4" src="/video_Large.mp4">
</video>
<video muted="" class="d-none d-md-block d-lg-none" poster="">
<source type="video/mp4" src="/video_Medium.mp4">
</video>
<video autoplay muted="" class="d-block d-md-none" poster="">
<source type="video/mp4" src="/uploads/video_Small.mp4">
</video>
</div>
First, you need to add id tags like this in your HTML:
<video id="large" muted="" class="col-md-12 d-none d-lg-block" poster="">
<source type="video/mp4" src="/video_Large.mp4">
</video>
<video id="medium" muted="" class="d-none d-md-block d-lg-none" poster="">
<source type="video/mp4" src="/video_Medium.mp4">
</video>
<video id="small" autoplay muted="" class="d-block d-md-none" poster="">
<source type="video/mp4" src="/uploads/video_Small.mp4">
</video>
Then you need to make your css responsive and hide the other two videos for each screen size. For example,
#media only screen and (min-width: 600px) {
#small, #medium{
display: none;
}
}
If you want to avoid the entirety of the video being preloaded when the page loads, you can add preload="none" or preload="metadata" attribute to the video tags. This means that the video will play only when the user clicks on it.
How should I remove black border around tag in Internet Explorer? I've tried changing background-color, adding border:none but none of these worked.
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source type="video/mp4" src="video/hsense-video.mp4" />
</video>
have you tried !important?
video {
border-style: none !important;
}
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
I just checked it in Codepen IE browser and there is not border. Also made an html page with the video and checked in IE 11 -> NO BORDER!
https://codepen.io/DannaB67/pen/GErxgx
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
I have the following video tag:
<video width="640" height="480" controls id="mainVideo" name="mainVideo">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
and I would like to position it on the top right of the browser's screen, irregardless of where the window scroll is (meaning, the video stays on top).
Try this...
#mainVideo{
position:fixed;
right:0;
top:0;
}
When I set my html5 video width and height to 100%, the video height is bigger than the browser visible area and a vertical scrollbar appears.
Is it because my video is in 4:3 format? How can I resize it to fill the entire space without having to scroll down the page?
Thanks for reading!
You will need to check the browser window height with javascript and limit your video to be smaller than that. Here is the fiddle
HTML:
<video id="vid1" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
CSS:
video {
width:100%;
height:100%;
}
Javascript:
window.onresize = function(event) {
var h=window.innerHeight;
document.getElementById("vid1").style.maxHeight=h+"px";
}