Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

exp-lookit-video default center position not working #414

Open
becky-gilbert opened this issue Nov 19, 2024 · 0 comments
Open

exp-lookit-video default center position not working #414

becky-gilbert opened this issue Nov 19, 2024 · 0 comments

Comments

@becky-gilbert
Copy link
Contributor

TL;DR

The default behavior for video positioning in the center of the screen is not working.

Summary

According to the exp-lookit-video documentation, when no size/position values are given, the video should be shown in its original size and positioned in the center of the screen. When tested, the video is displayed in its original size but it is positioned in the top left corner of the screen.

How to reproduce

 "video": {
  "kind": "exp-lookit-video",
  "baseDir": "https://raw.githubusercontent.com/UW-LIDL/lookit-stimuli-template/master/",
  "videoTypes": [
    "mp4"
  ],
  "video": {
    "source": "boing"
  }
}

With no size/position values, the video is shown in the top left corner:

Screenshot 2024-11-19 at 12 15 59 PM

Temporary workaround

For researchers looking for a solution to this problem, you can specify the video height/width and then adjust the top/left position values to get the video in the center. All of these values are percentages, which means that the video scale and position will be the same across different browser window sizes (though the physical size will differ). Here’s how to do it:

  1. Set the “height” and “width” values as percentages of the screen height/width. E.g. if you use 50 for the “height”, then the video height will be 50% of the window height.
  2. Assuming that you want to maintain the video’s aspect ratio, calculate the other dimension based on the first. E.g. if height = 50, and the original H to W ratio is 0.8, then calculate the width as: 50 x 0.8 = 41.
  3. With the width/height values set, position the video in the center by moving it down/right by half of the rest of the screen distance in each direction. E.g. if the video is 50% height, the rest of the screen is 50%, 50 / 2 = 25. For the 41% height, the rest of the screen is 59%, 59 / 2 =~ 30.

Here's what this looks like using the example values above:

"video": {
  "kind": "exp-lookit-video",
  "baseDir": "https://raw.githubusercontent.com/UW-LIDL/lookit-stimuli-template/master/",
  "videoTypes": [
    "mp4"
  ],
  "video": {
    "source": "boing",
    "top": 25,
    "left": 30,
    "width": 41,
    "height": 50
  }
}

If you want to change the video height/width, you will need to re-calculate the top/left values using the formulas described above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant