Psychopy fixed aspect ratio gratings how to#

In my research, I came across this CSS spec request from one of my CSS Grid gurus: Jen Simmons. And it seems like I’m not the only one with CSS Grid aspect ratio expectations. Dictating the aspect ratios on the embed itself is actually how I would intuitively expect aspect ratios to be handled in CSS.

Still, I appreciate CSS Grid for giving us some new approaches to age old problems like this one. I then used that custom property to set my grid column and row sizes.Īlso, to limit your video embed at a max size, you would have to set your cell sizes to a fixed pixel value at a certain breakpoint, which can also be kind of a headache. I used CSS custom properties to make this a bit less painless in my demo and simply set the -cellSize property to a new value at different breakpoints. You would also have to recalculate the cell size if you would like to change the overall width of that container at different break points. Since the size must be based on the viewport width to create responsive 1:1 grid cells, the math may get a little opaque if your video embed is nested within several ancestor elements. The funkiest part of this approach is the grid cell size calculations. See the Pen CSS Grid Experiment: fixed aspect ratio video embed by Stephanie ( on CodePen. Here, instead of creating a container with the appropriate aspect ratio, you set the aspect ratio on the embed itself. I actually really ended up liking how intuitive this approach was for me. So, for a container with an aspect ratio of 16:9 (the standard Youtube video aspect ratio), the markup will look like this: Īnd the CSS for the parent container would look like this. Knowing that, we can achieve a container element with the proper aspect ratio by setting height to 0 and setting padding-top to height/width * 100%. This way we can now make the height relative to the width of the element. The cool thing about using padding to dictate height instead of utilizing the height property itself is that padding percentages refer to the width of the containing block unlike percentage heights where the percentage is calculated with respect to the height of the generated box’s containing block. There’s a few variations of this method floating around the internet, but they all involve using padding to create a parent container with the desired aspect ratio. Typically the most accepted technique to achieve this involves a nifty trick with the parent container padding. We can get around this problem by wrapping our embed in a parent container with the proper aspect ratio and then stretching our embed to fill those container dimensions. However, a specified height combined with a responsive percentage-based width leads to awkward iframe responsive resizing, especially when it comes to videos. Responsive video embeds are tricky because, unlike images which are easy to scale with height: auto, iframe embeds must have a specified height to avoid it from collapsing since it’s unable to base its height on its contents. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.

Psychopy fixed aspect ratio gratings how to#

So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively.