3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 12:52:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(website): make YT iframe responsive (#6667)

Browse source 
* fix(website): make YT iframe responsive

* Redesign
This commit is contained in:
Alexey Pyltsyn 2022-02-13 16:13:45 +03:00 • committed by GitHub
parent e42f57ebd6
commit 4b7bea950f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -109,19 +109,26 @@ function TweetsSection() {
);
}
function ELIVideo() {
function VideoContainer() {
return (
<div className="container">
<div className="margin-top--md">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/_An9EsKPhp0"
title="Explain Like I'm 5: Docusaurus"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
<div className="container text--center margin-bottom--xl">
<div className="row">
<div className="col">
<h2>
<Translate>Check it out in the intro video</Translate>
</h2>
<div className={styles.ytVideo}>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/_An9EsKPhp0"
title="Explain Like I'm 5: Docusaurus"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
</div>
</div>
</div>
);
@ -199,7 +206,12 @@ function Home(): JSX.Element {
</div>
</div>
<div className={styles.section}>
<VideoContainer />
<div className="container text--center margin-bottom--xl">
<h2>
<Translate>Main features</Translate>
</h2>
<div className="row">
<div className="col">
<img
@ -209,9 +221,9 @@ function Home(): JSX.Element {
width="1009.54"
height="717.96"
/>
<h2 className={clsx(styles.featureHeading)}>
<h3 className={clsx(styles.featureHeading)}>
<Translate>Powered by Markdown</Translate>
</h2>
</h3>
<p className="padding-horiz--md">
<Translate>
Save time and focus on your project&apos;s documentation.
@ -230,9 +242,9 @@ function Home(): JSX.Element {
width="1108"
height="731.18"
/>
<h2 className={clsx(styles.featureHeading)}>
<h3 className={clsx(styles.featureHeading)}>
<Translate>Built Using React</Translate>
</h2>
</h3>
<p className="padding-horiz--md">
<Translate>
Extend or customize your project&apos;s layout by reusing
@ -249,9 +261,9 @@ function Home(): JSX.Element {
width="1137"
height="776.59"
/>
<h2 className={clsx(styles.featureHeading)}>
<h3 className={clsx(styles.featureHeading)}>
<Translate>Ready for Translations</Translate>
</h2>
</h3>
<p className="padding-horiz--md">
<Translate>
Localization comes pre-configured. Use Crowdin to translate
@ -271,9 +283,9 @@ function Home(): JSX.Element {
width="1038.23"
height="693.31"
/>
<h2 className={clsx(styles.featureHeading)}>
<h3 className={clsx(styles.featureHeading)}>
<Translate>Document Versioning</Translate>
</h2>
</h3>
<p className="padding-horiz--md">
<Translate>
Support users on all versions of your project. Document
@ -290,9 +302,9 @@ function Home(): JSX.Element {
width="1137.97"
height="736.21"
/>
<h2 className={clsx(styles.featureHeading)}>
<h3 className={clsx(styles.featureHeading)}>
<Translate>Content Search</Translate>
</h2>
</h3>
<p className="padding-horiz--md">
<Translate>
Make it easy for your community to find what they need in
@ -303,13 +315,6 @@ function Home(): JSX.Element {
</div>
</div>
</div>
<div className="container text--center">
<div className="row">
<div className="col">
<ELIVideo />
</div>
</div>
</div>
</div>
<TweetsSection />
<div className={clsx(styles.section)}>

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

@ -179,3 +179,22 @@
.test-marker-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%;
}
}