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(website): use react-lite-youtube-embed for lazy YouTube video #7390

Merged
merged 7 commits into from
May 12, 2022

Conversation

matkoch
Copy link
Contributor

@matkoch matkoch commented May 10, 2022

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

As discussed with @Josh-Cena. This is recommended in the lighthouse docs:

https://web.dev/third-party-facades/?utm_source=lighthouse&utm_medium=devtools#youtube-embedded-player

Test Plan

Test links

Deploy preview:

Related issues/PRs

#6746

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label May 10, 2022
@netlify
Copy link

netlify bot commented May 10, 2022

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 6571d14
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/627c6f13e5ef910008b4bdf4
😎 Deploy Preview https://deploy-preview-7390--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link

github-actions bot commented May 10, 2022

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 83 🟢 100 🟢 100 🟢 100 🟢 90 Report
/docs/installation 🟠 81 🟢 99 🟢 100 🟢 100 🟢 90 Report

@Josh-Cena Josh-Cena added the pr: documentation This PR works on the website or other text documents in the repo. label May 11, 2022
Copy link
Collaborator

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

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

There's another video on /docs/ as well. Could you take some time to migrate that?

@Josh-Cena
Copy link
Collaborator

@matkoch Besides the change requested above, I need to make some refactors as well. Please give me write access to your PR.

@matkoch
Copy link
Contributor Author

matkoch commented May 11, 2022

Update: Nvm, put // cSpell:ignore Yhyx Sksg in front of it.


Not sure how to resolve this in introduction.mdx (previously .md):

<div className="video-container">
  <LiteYouTubeEmbed
    id="Yhyx7otSksg"
    params="autoplay=1&autohide=1&showinfo=0&rel=0"
    title="Docusaurus: Documentation Made Easy"
    poster="maxresdefault"
    webp
  />
</div>

From commit:

CSpell: Files checked: 1, Issues found: 2 in 1 files
/Users/matt/code/docusaurus/website/docs/introduction.mdx:57:9 - Unknown word (Yhyx)
/Users/matt/code/docusaurus/website/docs/introduction.mdx:57:16 - Unknown word (Sksg)

@Josh-Cena
Copy link
Collaborator

91 perf score! Haven't seen that in quite a while... Awesome!

@Josh-Cena Josh-Cena merged commit fa10d1b into facebook:main May 12, 2022
@Josh-Cena Josh-Cena deleted the fix/lazy-youtube branch May 14, 2022 12:16
@slorber
Copy link
Collaborator

slorber commented May 25, 2022

Not a big deal but I'd rather create our own "YoutubeEmbed" component (using this lib) in "website/src/theme/components" rather than importing a third-party lib everywhere directly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: documentation This PR works on the website or other text documents in the repo.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants