`exp-lookit-video` default center position not working

[becky-gilbert]

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:

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.