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.

Sign up for GitHub

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

Jump to bottom

docs: remove deprecated frameborder, adjust allowFullScreen and update the demo #72644

Merged
merged 3 commits into from
Nov 19, 2024
+3 −8
Merged

docs: remove deprecated frameborder, adjust allowFullScreen and update the demo #72644

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2dd9872
docs: remove deprecated `frameborder`, adjust `allowFullScreen` and u…
alfawal Nov 13, 2024
8188b3b
Merge branch 'canary' into docs/update-video-optimization
delbaoliveira Nov 19, 2024
856edd5
prettier-fix
delbaoliveira Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions docs/01-app/02-building-your-application/06-optimizing/02-videos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,7 @@ The HTML `<iframe>` tag allows you to embed videos from external platforms like
```jsx filename="app/page.jsx"
export default function Page() {
return (
<iframe
src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
frameborder="0"
allowfullscreen
/>
<iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
)
}
```
Expand All @@ -78,8 +74,7 @@ export default function Page() {
| `src` | The URL of the page to embed. | `<iframe src="https://example.com" />` |
| `width` | Sets the width of the iframe. | `<iframe width="500" />` |
| `height` | Sets the height of the iframe. | `<iframe height="300" />` |
| `frameborder` | Specifies whether or not to display a border around the iframe. | `<iframe frameborder="0" />` |
| `allowfullscreen` | Allows the iframe content to be displayed in full-screen mode. | `<iframe allowfullscreen />` |
| `allowFullScreen` | Allows the iframe content to be displayed in full-screen mode. | `<iframe allowFullScreen />` |
| `sandbox` | Enables an extra set of restrictions on the content within the iframe. | `<iframe sandbox />` |
| `loading` | Optimize loading behavior (e.g., lazy loading). | `<iframe loading="lazy" />` |
| `title` | Provides a title for the iframe to support accessibility. | `<iframe title="Description" />` |
Expand Down Expand Up @@ -107,7 +102,7 @@ The first step is to create a [Server Component](https://nextjs.org/docs/app/bui
export default async function VideoComponent() {
const src = await getVideoSrc()

return <iframe src={src} frameborder="0" allowfullscreen />
return <iframe src={src} allowFullScreen />
}
```

Expand Down
Loading