Question 44651 in Html Question posted in
Some basic documentation can be found here.

how to limit the space of a random location for a button – Html

I want to create a button "Skip Intro", similar to the one on Netflix (but with a ridiculous part where a button changes its location randomly as soon as you hover over it). The code for changing to a random location is already done. But I want to keep the location of the button only limited to the inside of a video frame. How can I do this?

var button = document.querySelector(".button");

function randomizePosition() {
  var randomX = Math.random() * window.innerWidth;
  var randomY = Math.random() * window.innerHeight;
  console.log("randomX", randomX, " : randomY", randomY)
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}
randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});
.button {
  stroke: 3px;
  display: inline-block;
  padding: 20px;
  //border-radius: 5px;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 3px darkgrey;
}
<div class='button'>SKIP INTRO</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>

Here is a link to my work: https://codepen.io/artfsch/pen/ZEjZLgw

I know that it’s possible in JS to limit the variable to a range and set it to be only randomized within a specific range. Unfortunately, I don’t know how to implement it.

Tags:

2

Answers


  1. 0

    Try This

    var button = document.querySelector(".button");
var videoFrame = document.querySelector(".video-wrapper");

function randomizePosition(){
  var frameRect = videoFrame.getBoundingClientRect();
  var minX = frameRect.left;
  var maxX = frameRect.right - button.offsetWidth;
  var minY = frameRect.top;
  var maxY = frameRect.bottom - button.offsetHeight;
  var randomX = Math.floor(Math.random() * (maxX - minX + 1) + minX);
  var randomY = Math.floor(Math.random() * (maxY - minY + 1) + minY);
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}

randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});
    .button {
  stroke: 3px;
  display: inline-block;
  padding: 20px;
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  border:solid 3px darkgrey;
}

.video-wrapper {
  position: relative;
  width: 560px;
  height: 315px;
}
    <div class='button'>SKIP INTRO</div>
<div class="video-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ></iframe>
</div>
    Login or Signup to reply.
  2. 0

    Assuming you want to make the video full-screen, you can accomplish this by limiting the possible new locations for the button — basically creating artificial padding.

    I’ve done this by centering your button on its top/left position:

    transform: translate(-50%, -50%);

    and creating a padding of 100px around your window

    var randomX = (Math.random() * (window.innerWidth - 200)) + 100;
var randomY = (Math.random() * (window.innerHeight - 200)) + 100;

    https://codepen.io/QuiteQuinn/pen/YzOZjgE

    var button = document.querySelector(".button");

function randomizePosition(){
  var randomX = (Math.random() * (window.innerWidth - 200)) + 100; // Adding a 100px padding 
  var randomY = (Math.random() * (window.innerHeight - 200)) + 100; // Adding a 100px padding 
  console.log("randomX", randomX, " : randomY", randomY)
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}
randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});
    body, html{
  padding: 0;
  margin: 0;
}
.button{
  display: inline-block;
  padding: 20px;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 3px darkgrey;
  background: white;
  width: 100px;
  text-align: center;
  transform: translate(-50%, -50%); /*   Centering your button on its top/left position */
}
iframe{
  width: 100vw;
  height: 100vh;
}
    <div class='button'>SKIP INTRO</div>
<iframe src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search