jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-11 16:00:12 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): Allow use of semicolons in iframe lecture (#62670)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com>
This commit is contained in:
c0d1ng_ma5ter
2025-11-19 10:03:09 -06:00
committed by GitHub
parent a2c81caae6
commit e1cf5c2650
3 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md
View File

@@ -29,6 +29,8 @@ Here's an example of embedding a popular freeCodeCamp course from YouTube. To se
The `src` attribute specifies the URL of the page you want to embed. The `width` attribute specifies the width of the `iframe`. The `height` attribute specifies the height of the `iframe`. The `allowfullscreen` attribute allows the user to display the `iframe` in full screen mode. It's also a good practice to specify a `title` attribute for the `iframe`, as it's important for accessibility.
The `allow` attribute, on the other hand, lets you define what an iframe can or can't do. This is called an allowlist. In the above example, adding `clipboard-write` to it allows the embedded page to write items to your clipboard. Items in an allowlist can be separated by semicolons or spaces, and both can be used together.
Note that the video can come from anywhere. It doesn't have to come from video services like YouTube and Vimeo.
Don't forget you can also embed a map, another web page, or direct HTML within the `iframe` element. Here is an example of an embedded map.

9
curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md
View File

@@ -28,8 +28,7 @@ Your `iframe` element should have an `allow` attribute set to `accelerometer`.
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const accelerometer = iframeElAllowAttr.trim().split(' ')[0]
assert.strictEqual(accelerometer, 'accelerometer')
assert.match(iframeElAllowAttr, /accelerometer/)
```
The `allow` attribute of your `iframe` element should have `autoplay` as one of its values.
@@ -37,8 +36,7 @@ The `allow` attribute of your `iframe` element should have `autoplay` as one of
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const autoplay = iframeElAllowAttr.trim().split(' ')[1]
assert.strictEqual(autoplay, 'autoplay')
assert.match(iframeElAllowAttr, /autoplay/)
```
The `allow` attribute of your `iframe` element should have `clipboard-write` as one of its values.
@@ -46,8 +44,7 @@ The `allow` attribute of your `iframe` element should have `clipboard-write` as
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const clipboardWrite = iframeElAllowAttr.trim().split(' ')[2]
assert.strictEqual(clipboardWrite, 'clipboard-write')
assert.match(iframeElAllowAttr, /clipboard-write/)
```
# --seed--

9
curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md
View File

@@ -18,8 +18,7 @@ The `allow` attribute of your `iframe` element should have `encrypted-media` as
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const encryptedMedia = iframeElAllowAttr.trim().split(' ')[3]
assert.strictEqual(encryptedMedia, 'encrypted-media')
assert.match(iframeElAllowAttr, /encrypted-media/)
```
The `allow` attribute of your `iframe` element should have `gyroscope` as one of its values.
@@ -27,8 +26,7 @@ The `allow` attribute of your `iframe` element should have `gyroscope` as one of
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const gyroscope = iframeElAllowAttr.trim().split(' ')[4]
assert.strictEqual(gyroscope, 'gyroscope')
assert.match(iframeElAllowAttr, /gyroscope/)
```
The `allow` attribute of your `iframe` element should have `web-share` as one of its values.
@@ -36,8 +34,7 @@ The `allow` attribute of your `iframe` element should have `web-share` as one of
```js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
const webShare = iframeElAllowAttr.trim().split(' ')[5]
assert.strictEqual(webShare, 'web-share')
assert.match(iframeElAllowAttr, /web-share/)
```
# --seed--