I have a page that tries to display 4 videos in a 2x2 grid, but I currently have two problems.
There is space between videos
They are all in one column
Here is my current code:
<!DOCTPYE html>
<html>
<head>
<title>Memorabilia</title>
<style>
body {
margin: 0px;
}
video {
width: 50%;
}
</style>
</head>
<body>
<video autoplay loop muted>
<source src="a.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="b.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="c.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="d.mp4" type="video/mp4">
</video>
</body>
</html>
P.S. I don't want the videos to be of a fixed size, I want two videos in each row, that's why I put 50% in the width.
You need to just add float: left; in video tag.
body {
margin: 0px;
}
video {
width: 50%;
float: left;
}
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
Related
Background video, for my website, is not playing on iPhone:
<video id="video">
<source loop="true" id="vid" src="assets/img/watch.mp4" type="video/mp4">
</video>
use muted and autoplay attribute in video tag
<video id="video" muted autoplay>
<source loop="true" id="vid"
src="assets/img/watch.mp4" type="video/mp4">
</video>
I have video
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type='video/mp4; codecs=" H.264/MPEG-4"'>
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
</div>
And in IE 11 it does not show anything. I tried codecs like is described here. But not even type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' worked.
What can I do to make it work? Any different codec?
Edit:
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
Try to remove codec and pass the type with in double quotation works on my side in IE 11.
<!doctype html>
<head>
</head>
<body>
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="C:\Users\Administrator\Desktop\SampleVideo.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="C:\Users\Administrator\Desktop\big-buck-bunny_trailer.webm" type="video/webm" >
<p>Váš prohlížec nepodporuje video</p>
</video>
</div>
</body>
</html>
Output:
I have two videos, one for mobile and one for desktop. I use a media query to display them. My question is: Do both still "load"? I use a very small file for the mobile version but it seems to take forever to load still, which leads me to believe both are still being loaded. Here's my code:
HTML:
<video class="headVid1" playsinline autoplay muted loop preload="auto" id="bgvid">
<source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>
<video class="headVid2" playsinline autoplay muted loop preload="auto" id="bgvid">
<source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>
CSS:
.headVid2{
display: none;
}
#media (max-width:768px){
.headVid1{
display: none;
}
.headVid2{
display: block;
}
video#bgvid{
max-width:100vw !important;
}
}
You should set appropriate preload attribute ("none"). Example:
<video class="headVid1" playsinline autoplay muted loop preload="none" id="bgvid">
<source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>
<video class="headVid2" playsinline autoplay muted loop preload="none" id="bgvid">
<source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>
I would like to ask if there is someway I can hide this rewind line from my webpage?
I have a website with fullscreen video and I would like to disable any kind of rewinding.
My code:
<video autoplay="true" loop controls muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can't hide only the video scroller. You can hide the entire controls panel:
Just lose the controls attribute from your <video> tag:
<video autoplay="true" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I'm making a portfolio at the moment, and I want an mp4 file running in the background.. I know how to get it to loop & repeat, but apparently i can't figure out how to do it at the same time..
Here is the code I'm trying to do it with
<div class="wrapper">
<div class="screen" id="screen-1" data-video="vid/NycTrafficH264.mp4">
<h1 class="video-title">#K Designs</h1>
<!--for Video autoplay-->
<video controls autoplay>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<!--For video loop-->
<video controls loop>
<source src="vid/NycTrafficH264.mp4" type="vid/NycTrafficH264.mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</div>
</div>
You just need to add the loop attribute to the same node. Try the below code:
<video controls autoplay loop>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
I hope this is what you are looking for.