0
Staff needed to implement a feature in mine iframe from youtube that I inserted on my site I wanted when the page scrolls to appear my fixed youtube frame in the right corner of the screen equal to that site here only that I have no idea how to do or how to search since I do not know the name they give to this type of effect someone could help me pass some documentation link or how to do this thank you.
1
You can use jquery to do this. Follow the example I built:
<!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>
0
If it’s the same, leave the wireframe as position fixedand positions him with right:0 and bottom:0 these values you can help according to what gets better
I think that’s it, only css solves things
Show only when scrolling mouse
For this to be done an event to listen to the user scroll
Basic demonstration of how to create this event
let ouvindoScroll = document.addEventListener('scroll', (e) => {
console.log(e)
});
Making the video appear after a certain scroll
document.addEventListener('scroll', (e) => {
if (window.scrollY > 300) {
console.log("mostra video")
} else {
console.log("oculta video")
}
});
I think you can move on from here ;) I hope I’ve helped!
So friend needed the same link more realize that the mini video so stop when it scrolls the page is some specific plugin or a conf that makes inside the own frame
Yes yes, I will edit my answer with that information tbm, sorry
All right, help yourself
Browser other questions tagged iframe youtube
You are not signed in. Login or sign up in order to post.
friend js add in head or body at the end of page
– Felipe Henrique
no head <script src="js/jquery-3.2.1.min. js" type="text/javascript"></script>
– Damon Dudek
I added the entire document.
– Damon Dudek