diff --git a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md index cdea4ed01a6..1c5d21b6a3d 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md @@ -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. diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md index 7f73627ba82..b4e5b5f36f6 100644 --- a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md @@ -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-- diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md index 5ffcbc45958..f8a5af8b7e0 100644 --- a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md @@ -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--