Thanks for choosing Tracks!
This is due to a script that makes the videos responsive. In other words, an embedded Youtube video would usually fill part of the space available, and on mobile devices overflow out of the screen. In Tracks, embedded videos always fill the exact width of the content container (like this).
That said, you could reduce the width of all embedded videos with the following CSS:
.fluid-width-video-wrapper {
width: 90%;
}
Copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.
You can reduce the 90% value to further limit the width of embedded videos.
Thanks for the information.
I’m trying to just set a maximum width of the video because full-width is too wide but the responsiveness is nice.
The max-width property works great, but for some reason that doesn’t affect the video height (it’s the same height as it would be if the video were the width of the page). max-height doesn’t seem to constrain it.
I appreciate any insight you can provide.
Okay I see. The height comes from the padding-bottom value which is kind of a hack to get the videos responsive.
The padding-bottom is calculated via Javascript, so a CSS-only solution may not work perfectly. However, I would still recommend giving something like this a shot:
.fluid-width-video-wrapper {
max-width: 500px;
padding-bottom: 40%;
}
Reducing the padding-bottom value will make the video shorter, and vice-versa.
