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

Fix disappearing Youtube video #3416

Merged
merged 1 commit into from
Nov 12, 2024
Merged

Fix disappearing Youtube video #3416

merged 1 commit into from
Nov 12, 2024

Conversation

andysellick
Copy link
Contributor

@andysellick andysellick commented Nov 12, 2024

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

What

  • on this page https://www.gov.uk/government/publications/electronic-travel-authorisation-eta-help-videos/what-is-an-eta-video there is only an embedded video, which does not appear on mobile
  • this seems to be due to the .offset-empty-contents-list class, which floats the main column right if there is no contents list on the left to push it across
  • however below desktop this styling persists, when all the grid columns should have collapsed
  • somehow if there is only a Youtube video present in this floated element, it produces an element with zero width, so the video is effectively invisible
  • adjusting the class to only apply on desktop seems to fix the issue

Have checked this on some other HTML publications, both with and without contents lists on the left, and the fix seems to not have impacted anything else. I suspect the page where this problem occurs is something of an edge case - if there is any other content with the video it forces a width on the element and all is fine.

Why

This was reported in a basecamp thread: https://3.basecamp.com/4322319/buckets/15005645/messages/7988954800#__recording_7998073365

Visual changes

Before After
Screenshot 2024-11-12 at 11 04 04 Screenshot 2024-11-12 at 11 04 09

@govuk-ci govuk-ci temporarily deployed to government-frontend-pr-3416 November 12, 2024 11:06 Inactive
@govuk-ci govuk-ci temporarily deployed to government-frontend-pr-3416 November 12, 2024 11:09 Inactive
- on this page https://www.gov.uk/government/publications/electronic-travel-authorisation-eta-help-videos/what-is-an-eta-video there is only an embedded video, which does not appear on mobile
- this seems to be due to the `.offset-empty-contents-list` class, which floats the main column right if there is no contents list on the left to push it across
- however below desktop this styling persists, when all the grid columns should have collapsed
- somehow if there is only a Youtube video present in this floated element, it produces an element with zero width, so the video is effectively invisible
- adjusting the class to only apply on desktop seems to fix the issue
@govuk-ci govuk-ci temporarily deployed to government-frontend-pr-3416 November 12, 2024 11:11 Inactive
Copy link
Contributor

@matthillco matthillco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.

@andysellick andysellick merged commit 3780461 into main Nov 12, 2024
11 checks passed
@andysellick andysellick deleted the fix-youtube-video branch November 12, 2024 16:13
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

Successfully merging this pull request may close these issues.

3 participants