-
Notifications
You must be signed in to change notification settings - Fork 643
Fix: The demo video is the wrong size in docs #13187
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
base: master
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1 file reviewed, 1 comment
width="600" | ||
height="337" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: hardcoded dimensions make the video non-responsive on smaller screens - other YouTube iframes in the docs don't use explicit dimensions (see retention.mdx:11-14, funnels.mdx:46-49, trends/overview.mdx:47-50)
Prompt To Fix With AI
This is a comment left during a code review.
Path: contents/docs/product-analytics/dashboards.mdx
Line: 24:25
Comment:
**style:** hardcoded dimensions make the video non-responsive on smaller screens - other YouTube iframes in the docs don't use explicit dimensions (see retention.mdx:11-14, funnels.mdx:46-49, trends/overview.mdx:47-50)
How can I resolve this? If you propose a fix, please make it concise.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works, but like @joethreepwood said, we'd have to apply these fixes to every <iframe>
youtube embed
className="rounded shadow-xl" | ||
width="600" | ||
height="337" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd use tailwind classes for full width and 16:9 aspect ratio, so the video resizes for mobile
The mt-4 is just for spacing (the table of contents and video player touch rn on mobile)
className="rounded shadow-xl" | |
width="600" | |
height="337" | |
className="rounded shadow-xl mt-4 w-full aspect-video" |
Changes
Before

After

However, this occurs on many pages and only fixes one. I can role this out further if needed, but I'm pretty sure there'll be a smarter way to do this and that we may be wise to move to Wistia instead.
Checklist
vercel.json
Article checklist