Personal needed to implement a feature in my iframe of youtube that I inserted in my site I wanted that when it rolled the page appeared my youtube frame fixed in the right corner of the same screen of that site here I just have no idea how to do or how to search since I do not know the name they give to this type of effect could someone help me pass some documentation link or how to do that thank you.
Fixing iframe video when scrolling page
0
asked by anonymous 25.08.2017 / 22:23
2 answers
1
You can use jquery to do this. Here is the example I put together:
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
console.log("pronto");
// evento quando o scrool é acionado
$(window).scroll(function(){
console.log($(window).scrollTop());
// tamanho do scrool maior que 320px, adiciona class para reposicionar o vídeo
if ($(window).scrollTop() > 320)
$("#frameVideo").addClass("positionRight");
// tamanho do scrool em tamanho diferente que 320px, remove class para reposicionar o vídeo
else
$("#frameVideo").removeClass("positionRight");
});
});
</script>
<style>
body {
margin: 0px;
height: 0px;
height: 2000px;
}
.position {
height: 300px;
width: 600px;
background-color: red;
}
.positionRight {
position: fixed;
right: 0;
bottom: 0;
height: 150px;
width: 300px;
background-color: blue !important;
}
</style>
</head>
<body>
<div id="frameVideo" class="position"></div>
</body>
</html>
25.08.2017 / 22:45
0
If it is the same, leave the wireframe as position fixed and position it with right:0 and bottom:0 these values you can help according to what works best
I think that's it, just with css if it solves things
Show only when you scroll the mouse
For this, an event must be done to listen to the user's scroll
Basic demonstration of how to create this event
let ouvindoScroll = document.addEventListener('scroll', (e) => {
console.log(e)
});
Making the video appear after some scrolling
document.addEventListener('scroll', (e) => {
if (window.scrollY > 300) {
console.log("mostra video")
} else {
console.log("oculta video")
}
});
I think that from here you can already move forward;) I hope I have helped!
25.08.2017 / 22:31