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>
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>
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.
what I am trying to accomplish is to make my object scale with my browser window. As I increase the browser the object just moves directly up instead of just staying in the same position and scaling with the browser. The video that I have the object on scales just fine it's the object on top that I am having problems with. If anyone has any suggestions that would really help. Thank you!
Here is a JsFiddle but I'm not sure how helpful it'll be.
https://jsfiddle.net/tad1jcxt/
HTML:
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>
CSS:
object{
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
#headline{
text-align: center;
position: absolute;
top:10%;
left:35%;
color:#00E3FF;
line-height:20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size:12px;
}
The desired screen position of your <object> (containing a graphic) is 8.5% of the screen height from the top, and 32% of the screen width from the left hand side. However, the top and left CSS properties only apply to absolutely positioned elements; e.g., position: fixed or position: absolute. Therefore, simply add position: absolute to your CSS properties for the <object> and you're good to go.
object{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
I also strongly recommend that you not change the global definition of an <object> element in this case because it seems very specific to this instance. It is best to give your <object> an ID attribute and then use that to give it the CSS properties desired:
<style>
#logo{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
</style>
<object id="logo" type="image/svg+xml" data="comweb2.svg" ></object>
For reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/left
https://developer.mozilla.org/en-US/docs/Web/CSS/top
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
I've seen this question pop up a couple of times without any clear resolution.
I'm loading a simple video
<video src="" controls></video>
Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).
I've then applied a border-radius to the video tag. This works, except in Chrome.
I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.
Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?
I'm not sure but I think that this is what's meant by "using SVG":
The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):
Demo: http://jsfiddle.net/pe3QS/3/
CSS (minus the SVG's):
#video-container {
position: relative;
}
#overlay {
position: absolute;
width: 320px;
height: 240px;
left: 0;
top: 0;
pointer-events: none;
background-image: url('data:image/svg+xml...');
background-position: top right, top left, bottom left, bottom right;
background-repeat: no-repeat;
}
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
<div id="overlay"></div>
</div>
You could also use a psuedo-element (not on the video element, it would'nt display):
Demo: http://jsfiddle.net/pe3QS/2/
CSS:
#video-container:after {
position: absolute;
width: 320px;
height: 240px;
content: " ";
.....
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
The SVG's are pretty simple to modify, just change the fill attribute on each of them.
This could probably also be done via JS.