3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-18 17:17:57 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(website): fix video responsiveness (#6709)

Browse source
This commit is contained in:
Alexey Pyltsyn 2022-02-17 16:22:36 +03:00 • committed by GitHub
parent 1551407a9b
commit 0f1f35b678
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

22
website/docs/introduction.md
View file

@ -50,18 +50,16 @@ Or read the **[5-minute tutorial](https://tutorial.docusaurus.io)** online.
In this presentation at [Algolia Community Event](https://www.algolia.com/), [Meta Open Source team](https://opensource.facebook.com/) shared a brief walk-through of Docusaurus. They covered how to get started with the project, enable plugins, and set up functionalities like documentation and blogging. In this presentation at [Algolia Community Event](https://www.algolia.com/), [Meta Open Source team](https://opensource.facebook.com/) shared a brief walk-through of Docusaurus. They covered how to get started with the project, enable plugins, and set up functionalities like documentation and blogging.
<div className="col"> <div className="video-container">
<div> <iframe
<iframe width="560"
width="560" height="315"
height="315" src="https://www.youtube.com/embed/Yhyx7otSksg"
src="https://www.youtube.com/embed/Yhyx7otSksg" title="Docusaurus: Documentation Made Easy"
title="Docusaurus: Documentation Made Easy" frameBorder="0"
frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen
allowFullScreen />
/>
</div>
</div> </div>
## Disclaimer {#disclaimer} ## Disclaimer {#disclaimer}

19
website/src/css/custom.css
View file

@ -192,3 +192,22 @@ div[class^='announcementBar_'] {
.test-marker-site-custom-css-unique-rule { .test-marker-site-custom-css-unique-rule {
content: 'site-custom-css-unique-rule'; content: 'site-custom-css-unique-rule';
} }
@media only screen and (max-width: 996px) {
.video-container {
position: relative;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding-top: 56.25%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

2
website/src/pages/index.tsx
View file

@ -162,7 +162,7 @@ function VideoContainer() {
<h2> <h2>
<Translate>Check it out in the intro video</Translate> <Translate>Check it out in the intro video</Translate>
</h2> </h2>
<div className={styles.ytVideo}> <div className="video-container">
<iframe <iframe
width="560" width="560"
height="315" height="315"

19
website/src/pages/styles.module.css
View file

@ -179,22 +179,3 @@
.test-marker-site-index-page { .test-marker-site-index-page {
content: 'site-index-page'; content: 'site-index-page';
} }
@media only screen and (max-width: 996px) {
.ytVideo {
position: relative;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding-top: 56.25%;
}
.ytVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}