<div class="col-lg-6 col-md-8 embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" width="100%" controls="controls">
<source src="files/video.mp4" type="video/mp4">
</video>
</div>
I have tried different things but the video width won't fit the controls. I noticed that if I don't specify the width and set the Height to "auto" it does fit perfectly but the controls don't show anymore.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>page1</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.center{
position: fixed;
right: 0em;
top: 0em;
min-width: 100%;
min-height: 90%;
image-resolution: 90%;
}
</style>
</head>
<body>
<video class="center" width="100%" loop="true" autoplay="autoplay" controls muted>
<source src="files/video.mp4" type="video/mp4"/>
</video>
</body>
</html>
Try adding fullscreen styles! and never forget to mute if you wanna autoplay!
Related
I tried making a looping background video but only the video controls are being displayed on the page, the rest is blank.
<section id="portfolio-cover" data-height="fullscreen">
<div>
<video id="background-video" playsinline autoplay muted loop width="320" height="240" opacity= 50 controls >
<source src="chicago.mp4" type="video/mp4">
</video>
</div>
</section>
I think the problem here is that the src is not being called correctly, is the file in the same folder as your html file? Or is it a link? Because I tested this out with a video link and a proper file path to the video and it works perfectly fine. Try double checking the path of your video file or if its a link, comment it here, so I can show you how to write it down in src=""
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>videobg</title>
<style>
.mainblock{width:100%; float:left; margin:0 auto; padding:0; height:100vh; position:relative; overflow:hidden;}
.mainblock #video-background{
position: absolute;
left: 0;
right:0;
margin:0 auto;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:100%;
}
#media screen and (max-width:1024px){
.mainblock #video-background{width:auto; height:100vh;}
}
</style>
</head>
<body>
<div class="mainblock">
<video preload="metadata" id="video-background" controls="" autoplay="" loop="" playsinline="" muted="">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Full screen Video tag html
I have a little problem regarding my Bootstrap page. At the bottom of my page, there is a unwanted 5px long space. I've tried everything, like setting the margin and padding both to 0, but nothing happened. Does someone know a working solution to remove it?
Edit: Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body style="width: 100%">
<video style="width: 100%" id="player-video">
<source src="intro.mp4" type="video/mp4">
</video>
<script src="jquery/jquery-3.4.1.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Could you please give your video tag a display:flex and height: 100% that will help to fill any white space that has not been allocated.
on my demo, it worked out just fine.
If that doesn't work please let me know.
Note that I had bootstrap in the demo folder.
<video style="width: 100%; display: flex; height: 100%;" id="player-video">
<source src="3. create-react-app.mp4" autoplay type="video/mp4">
</video>
How can I add border-radius to the <video> tag.This is what my video looks like right now:
(image is here: <a href="https://i.stack.imgur.com/izKz0.png")
I already tried doing the video tag with css but it doesn't change.
Here is the code:
/*CSS*/
video {
border-radius: 10px;
}
<!HTML!>
<div class="fp-player">
<center>
<div id="instructions">
<video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</center>
</div>
Wrap the video in a div and give it this styling,
div {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 320px;
width: 480px;
}
I found this answer at Adding border-radius for embedded YouTube video
Try clearing your browsing history.
Here is an example that may help
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#video1 {
border-radius:10px;
}
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</body>
</html>
Add "border-radius:10px;" to the style of the video.
I cannot for the life of me get the audio tag to work in IE9. Here is my code, what exactly am I doing wrong? I made sure my tags were all in order and I put an exception in to force IE9 to use HTML5. Thanks in advance for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CD Cover Animation</title>
<script type="text/javascript" src="js/animCD.js?rev=new"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Show Audio when button is clicked -->
<script type="text/javascript">
function showAudio()
{
document.getElementById('audioInterview').style.visibility='visible';
}
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<video autoplay="autoplay" id="videoBackground" width="1280" height="720" preload="auto" ontimeupdate="animCD_onprogress();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther-2.mp4">
<source id="colorVid_ogg" type="video/ogg" src="img/luther-2.ogg">
</video>
<audio id="audioInterview" preload='auto' controls style="visibility:hidden"
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- <div class="buttonSkip" onclick="alert('Clicked Skip');"></div> -->
<p><a class="ex2" href="http://www.lrltv.org/muslims-nuclear.html">[ skip intro]</a></p>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio();" class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Add more buttons here -->
</body>
</html>
Like the comments say, you need to close the audio tag. But that they don't mean the </audio> but the > at the end of the line. It should look like this:
<audio id="audioInterview" preload="auto" controls="controls" style="visibility:hidden">
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
I also use the controls="controls".
If you don't need to show the audio control, you also do this in pure JavaScript.
var audioInterview = new Audio('audio/interview.mp3');
audioInterview.play();
And then remove the HTML audio tag.
I'm having some issues with video for mobile and HTML5. My biggest problem is that the video will play like 2 seconds and stop because not enough of the video has loaded. The video is 1:26s long and 9mb. I was testing on wifi. Is there a way that I can make the video wait til enough has loaded so it can play without issues? or what is my best option to help solve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
-->
</style>
</head>
<body>
<!--<div id = "m_loader">
<div id = "loading_hold">
<img src="d_logo.png" width="365" height="500" />
</div>
</div>-->
<video controls="controls" autoplay="autoplay">
<source src="reel720_3.mp4" type="video/mp4" />
<source src="reel720_3.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
You can use the "canplaythrough" event. Though you may want to show some sort of progress/download indicator while this is happening.
myVideo.addEventListener('canplaythrough', function() {
myVideo.play();
});