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>
Related
What to change to work on Iphone? In chrome it work.
<video class="video"
autoplay loop preload muted playsinline
poster="#/assets/video/posters/02.png"
>
<source
src="https://drive.google.com/uc?export=download&id=1-SKkq6GLCPXc3MeSvsWED12GK6NkR_Tp"
type="video/mp4"
>
</video>
I am trying to figure out why the video is not autoplaying in IOS devices?
<div class="video-container">
<video id="intro-video" video-src="https://www.w3schools.com/html/mov_bbb.mp4" poster="" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="1600" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="900" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="480" playsinline autoplay muted loop>
</video>
Playsinline is already added as described in the IOS video documentation
webkit-playsinline is not added
Most modern web-browsers don't allow to auto-play audio and video if there is no interaction from the user, as a click on the webpage.
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 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 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>