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

Html – How to change CSS object-position Y value dynamically

HTML newb here, I recently recorded 3 camera angles of an hour long family event, synced the clips, trimmed them to the exact same length, they’re all 720p 25fps, and I stacked them vertically into a single 1280×2160 25fps MP4 that will be put on a web server I’ve setup. My intent is to switch between different camera angles using CSS object-position Y value. That works as expected when I set the Y value explicitly in the CSS,but I would like to add 3 buttons that can dynamically change the Y value via onClick.

object-position: 0px 0px;

The 2nd value needs to be -720px, or -1440px to show the 2nd and 3rd parts of the video, so how could I simply apply those values using OnClick with a button?

I tried to define a variable, place the variable in object-position, and change the value using onClick and .innerHTML

:root { --camposition: 0; }

<button type="button" onClick="document.getElementById('--camposition').innerHTML='-720px';">Guests</button>

Thanks in advance for any help, googling was a deeeeep dive, hence my reaching out to the wonderful stack overflow community 🙂

Tags:

2

Answers


  1. 0

    Is something like this what you’re looking for ? Give your video element object-fit: none a fixed size height (and the width you can set to auto) that fits only one of the 3 videos at the time and then change the background position depending on what button was pressed.

    const img = document.querySelector('#img')

document.addEventListener('click', (e) => {
      const target = e.target
    if(!target.classList.contains('angleBtn')) { return }
    
    const angle = target.dataset.angle
    img.style = `object-position: 0 ${angle}`
})
    .wrap {
    position: absolute;
    top: 10px;
}

img {
    height: 300px;
    width: 400px;
    object-fit: none;
}
    <img id='img' src="https://images.pexels.com/photos/30021479/pexels-photo-30021479/free-photo-of-majestic-giraffe-against-cloudy-sky.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">

<div class='wrap'>
    <button class='angleBtn' data-angle='10%'>Angle 1</button>
    <button class='angleBtn' data-angle='50%'>Angle 2</button>
    <button class='angleBtn' data-angle='80%'>Angle 3</button>
</div>
    Login or Signup to reply.
  2. 0

    Details are commented in example.

    // Reference the element containing the <button>s
const controls = document.querySelector(".controls");
// Make an array of all <video>s
const vidArray = [...document.querySelectorAll("video")];

/**
 * This is the "click" event handler. When .controls
 * is clicked it determines which <button>
 * was clicked using .target property. Once that's
 * determined, the <video> that corresponds to the clicked
 * <button> will scroll into view using the scrollIntoView()
 * method.
 */
const goToVideo = (event) => {
  const clicked = event.target.id;
  switch (clicked) {
    case "v1":
      vidArray[0].scrollIntoView();
      break;
    case "v2":
      vidArray[1].scrollIntoView();
      break;
    case "v3":
      vidArray[2].scrollIntoView();
      break;
  }
};

/**
 * Register <menu class="controls"> to listen for
 * the "click" event and delegate to the <button>s.
 */
controls.addEventListener("click", goToVideo);
    :root {
  font: 2ch/1.5 "Segoe UI"
}

main {
  margin: 1rem auto;
}

/**
 * - This is the parent of the <video>.
 * - It's width should be the same as the
 *   <video> (1280px)¹.
 * - It's height should be divided by 3 
 *   (720px)¹
 * - overflow-y and scroll-behavior are
 *   critical
 * ¹measurements in relation to OP's layout
 */
.frame {
  width: 320px;
  height: 180px;
  margin: 0 auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

video {
  display: block;
}

.controls {
  display: flex;
  justify-content: center;
  width: 320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

button {
  display: block;
  width: 106px;
  font: inherit;
  cursor: pointer;
}
    <main>
  <section class="frame">
    <!-- 
      There are 3 <video>s to simulate OP's
      modified MP4 of 1280px x 2160px.
      In this layout the dimensions are
      320px x 540px ( ¼ ratio ).
    -->
    <video src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" width="320" height="180" muted loop autoplay></video>
    <video  src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4" width="320" height="180" muted loop autoplay></video>
    <video src="https://glsec.s3.amazonaws.com/mp4/60s.mp4" width="320" height="180" muted loop autoplay></video>
  </section>

  <menu class="controls">
    <li><button id="v1">1</button></li>
    <li><button id="v2">2</button></li>
    <li><button id="v3">3</button></li>
  </menu>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search