I have an autoplay video on my site which also serves as a link to another page. But now I found a problem in the power saving mode of the iPhone. Clicking on the video plays the video. But when I click again nothing happens. However, I would like the integrated link to open.
My code:
video {
width: 80vw;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
<body>
<a href="http://www.google.com">
<video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>
</a>
</body>
Can you help me so that the link also opens in power saving mode?
You can accomplish this with JS and an onclick event.
const targetURL = "404.404";
// Not a real address
function openURL() {
window.location = targetURL;
}
video {
width: 80vw;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
<body>
<video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>
</body>
404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.
Related
I set the video at the desktop page version. I would like to change that video to the image when the page width is less than 480px (for the mobile version). I've already set a poster for the video tag but don't know how to make the image to be shown correctly on mobiles (now it is the only video shown on all devices). Please, tell me how to set an image correctly.
Thanks
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
<main class="main">
<div class="main-background">
<video preload="none" autoplay playsinline muted loop class="video"
poster="./images/beach.jpg" id="video">
<source src="./video/Atropicallandscape.mp4" type="video/mp4">
</video>
</div>
</main>
JavaScript solution
You could use JavaScript to determine the media size using matchMedia() => MDN: method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
In your HTML, add the image element in your video elements parent element and add a helper class to toggle display: none; on the elements style in your CSS to be used when your media query matches the size you want.
Then you create a function and pass the event in to the function that checks the size of the browser using event.matches => e.matches. A conditional can be used to handle the switching of display for the elements. You can use a helper class that simply defines the display property as none which can be toggled back and forth if truthy using el.classList.add/el.classList.remove.
Then add an eventListener to use your function that checks the size of your devices screen size.
const main = document.querySelector('.main-background')
const video = main.querySelector('.video')
const image = main.querySelector('.image')
const mediaQuery = window.matchMedia('(max-width: 450px)')
function handleChange(e) {
if (e.matches) {
video.classList.add('hidden')
image.classList.remove('hidden')
}else{
image.classList.add('hidden')
video.classList.remove('hidden')
}
}
mediaQuery.addListener(handleChange)
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.image {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background: url('https://picsum.photos/450/450') no-repeat;
}
.hidden {
display: none;
}
<main class="main">
<div class="main-background">
<video preload="none" autoplay playsinline muted loop class="video" poster="./images/beach.jpg" id="video">
<source src="./video/Atropicallandscape.mp4" type="video/mp4">
</video>
<div class="image hidden">
</div>
</div>
</main>
So I have video thumbnails in a flexbox. How can I change it to display an image when hovered on the video?
I can change video to video, image to image, however am not sure how to change the source from video to image, and as it is in a flexbox I can't hide the image under the video
<video autoplay loop muted src="./video.mp4" type="video/mp4 id="video""
onmouseout="this.src='./video.mp4'"
onmouseover="this.src='./image.png'"> </video>
I also tried jQuery to replace the whole video source block, but I don't think I got it right
$("#video").mouseover( function () {
var $image = $("img").attr('src', './image.png');
$(this).replaceWith($image );
});
https://codepen.io/saltykiam/pen/abmGbWK
edit: how can i make an image overlay on a video
Here is the basic idea of how you can add the image into the overlay and show once someone hove the video, I hope you looking for the same
.videoWraper{
position:relative;
display:block;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
}
video#video {
width: 100%;
}
.videoWraper:hover .img-overlay{
opacity:1;
}
<div class="videoWraper">
<video autoplay loop muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" id="video"> </video>
<img class="img-overlay" src="https://picsum.photos/200">
</div>
Using reactjs, I'm inserting a video in a component but it doesn't seems to like when I use a relative unit in the max-height I've set for the container.
And I'd like to use vh to set the max-height, but when I do the video goes above the other contents of the page (like a wild z-index) and don't work like a child-block that'd set the container's dimensions...
Is it possible to counter/avoid that effect?
Simplified render method :
render() {
return (
<div className='ThatComponentContainer'>
<div>
<p>Some content</p>
</div>
<div className='VideoPlayer' width='520' height='294'>
<video controls preload="auto" width='520' height='294'>
<source src={VideoWEBM} type="video/webm" />
<p>I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.</p>
</video>
</div>
<div>
Some other cotent
</div>
</div>
);
}
CSS:
.ThatComponentContainer {
display: flex;
}
.VideoPlayer video {
min-height: 100%;
height: auto;
}
.VideoPlayer {
/*
max-height: 20vh; <<<----- I'd like to use this */
max-height: 588px;
min-height: 294px;
height: auto;
max-width: 90%;
width: auto;
}
Here is the video, and I've another issue but I can't seem to find anything about it...
The video's controls are over the video's bottom, hence you can't see a part of the video.
I'd like to have the controls under the video, is it possible?.
As stated by Tushar Vaghela in the comments, this is part of the shadow-dom (the built in browser CSS, essentially).
The best solution right now is to hide controls and use simple custom ones. Here's everything you need, courtesy of MDN.
The code
Live example
Written guide
try to add this css too with your video tag if it helps
video {
object-fit: fill;
}
if this does not work for you than try video.js it will help you to give your video player a customs options too with the default controls
I have built a site that has a background video and looking to improve on the user experience. Currently all text elements load before the background video does. What I want is for the video to load first before the text does, how can i achieve this? Below is the css and html snippet I'm using. You can also use this test url to view the site http://www.convenantkingsandqueens.academy
video.fullscreen {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
<header id="page-top" class="header">
<div class="container">
<div class="text-vertical-center">
<img src="images/tmw_logo.png" class="img-responsive logo_img" alt="Timeline Media Workx Logo" style="height: 200px; width: 450px;">
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop autoplay></video>
</div>
</div>
</header>
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop preload="metadata"></video>
Note: The preload attribute is ignored if autoplay is present. It does not work in IE browser
I am fairly new to HTML & CSS. I want to display some text in a section, with a looping video background.I tried setting the z-index to -1 but I am still unable to see the text.I also tried placing the text (<p> Hello!</p>) in different parts of the block but to no avail.Here is the HTML Code:
<section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
<div>
<video id="video" style=" position: relative ; background : cover ; background-position: center; width:100%; height:20% z-index:-1" autoplay loop muted >
<p color":#000000"> hello ! </p>
<source src="journey.mp4" type='video/mp4'/>
</video>
</div>
</section>
Here is the CSS for the quote id tag :
#quote {
background-repeat: repeat;
overflow-x: hidden;
overflow-y:hidden;
height: 20px;
}
I tried setting the z-index to -1 but I am still unable to see the
text.
In this case z-index is not really what you need in order to create this style effect. position:absolute; is what you need.
By putting your <p> outside of the <video> and giving it a position absolute will do the job.
I want to display some text in a section, with a looping video
background
To create a looping video as a background you'll need to set
<video preload autoplay loop muted>
preload - We don't really need this here beacause the preload attribute is ignored if autoplay is present.
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances as mentioned above.
autoplay - Autoplays the video. The video will automatically start playing as soon as it can do so without stopping.
loop - It specifies that the video will start over again, every time it is finished.
muted - It specifies that the audio output of the video should be muted. Assuming that you want to avoid the music/sound of the video to be turned on for a background video
At the end, here's how the whole thing looks like:
<section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
<div class="videoContainer">
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/webm; codecs="vp8, vorbis"' />
Video not supported.
</video>
<p class="overlayText"> hello there! This is some text.</p>
</div>
</section>
and your CSS
#quote {
background-repeat: repeat;
overflow: hidden;
position: relative;
}
.overlayText {
color:#000;
position:absolute;
top: 0;
}
/* This is just some CSS styling to make the video fill 100% of its div */
.videoContainer {
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
}
Online Example Here