From b60dc22ea20cdba0bbefcdcea169485536e904e1 Mon Sep 17 00:00:00 2001 From: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Date: Tue, 30 Sep 2025 09:41:45 +0100 Subject: [PATCH] feat(curriculum): add iframe video workshop (#62053) Co-authored-by: Sem Bauke Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 6 ++ .../index.md | 9 +++ .../68b94f23f7b3ee14078c89c5.md | 47 +++++++++++ .../68ba9c4f1688914d72876093.md | 45 +++++++++++ .../68ba9c4f1688914d72876094.md | 51 ++++++++++++ .../68ba9c4f1688914d72876095.md | 50 ++++++++++++ .../68ba9c4f1688914d72876096.md | 79 +++++++++++++++++++ .../68ba9c4f1688914d72876097.md | 69 ++++++++++++++++ .../68ba9c4f1688914d72876098.md | 49 ++++++++++++ .../68ba9c4f1688914d72876099.md | 78 ++++++++++++++++++ ...op-build-a-video-display-using-iframe.json | 20 +++++ .../superblocks/full-stack-developer.json | 1 + 12 files changed, 504 insertions(+) create mode 100644 client/src/pages/learn/full-stack-developer/workshop-build-a-video-display-using-iframe/index.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68b94f23f7b3ee14078c89c5.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876093.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876094.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876095.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876098.md create mode 100644 curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876099.md create mode 100644 curriculum/structure/blocks/workshop-build-a-video-display-using-iframe.json diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 0f10f7e8cd8..9ec4c345b57 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2151,6 +2151,12 @@ "In these lectures, you will learn how to work with the iframe element which is used to embed an external site on your web page." ] }, + "workshop-build-a-video-display-using-iframe": { + "title": "Build a Video Display Using iframe", + "intro": [ + "In this workshop, you'll learn how to work with the iframe element by building a video display." + ] + }, "lab-video-compilation-page": { "title": "Build a Video Compilation Page", "intro": [ diff --git a/client/src/pages/learn/full-stack-developer/workshop-build-a-video-display-using-iframe/index.md b/client/src/pages/learn/full-stack-developer/workshop-build-a-video-display-using-iframe/index.md new file mode 100644 index 00000000000..ee354e996c0 --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/workshop-build-a-video-display-using-iframe/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Video Display Using iframe +block: workshop-build-a-video-display-using-iframe +superBlock: full-stack-developer +--- + +## Introduction to the Build a Video Display Using iframe + +This workshop focuses on how to build a video display feature with the `iframe` element. diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68b94f23f7b3ee14078c89c5.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68b94f23f7b3ee14078c89c5.md new file mode 100644 index 00000000000..5eb08ea4f52 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68b94f23f7b3ee14078c89c5.md @@ -0,0 +1,47 @@ +--- +id: 68b94f23f7b3ee14078c89c5 +title: Step 1 +challengeType: 0 +dashedName: step-1 +demoType: onLoad +--- + +# --description-- + +In this workshop, you will use the `iframe` element to display a video. The basic HTML boilerplate has been prepared for you. + +Begin by creating an `h1` element with the text `iframe Video Display`. + +# --hints-- + +You should have an `h1` element. + +```js +assert.exists(document.querySelector('h1')) +``` + +Your `h1` element should have the text `iframe Video Display`. + +```js +assert.equal(document.querySelector('h1')?.textContent, 'iframe Video Display') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876093.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876093.md new file mode 100644 index 00000000000..9f6e35da69c --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876093.md @@ -0,0 +1,45 @@ +--- +id: 68ba9c4f1688914d72876093 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Now, create an `iframe` element. Don't put anything in it yet. + +# --hints-- + +You should have an `iframe` element. + +```js +assert.exists(document.querySelector('iframe')) +``` + +Your `iframe` element should be empty. + +```js +assert.equal(document.querySelector('iframe')?.innerHTML.trim(), '') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876094.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876094.md new file mode 100644 index 00000000000..4e2cc57b232 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876094.md @@ -0,0 +1,51 @@ +--- +id: 68ba9c4f1688914d72876094 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the first lesson on the `iframe` element, you learned it's a replaced element just like `img`. That means it can also take the `width` and `height` properties to determine how tall and wide it should be. + +Give your `iframe` element a `width` of `560` and a `height` of `315`. + +# --hints-- + +Your `iframe` element should have a `width` attribute set to `560`. + +```js +const iframeEl = document.querySelector('iframe') +assert.equal(iframeEl?.getAttribute('width'), '560') +``` + +Your `iframe` element should have a `height` attribute set to `315`. + +```js +const iframeEl = document.querySelector('iframe') +assert.equal(iframeEl?.getAttribute('height'), '315') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876095.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876095.md new file mode 100644 index 00000000000..bdcdcbd308e --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876095.md @@ -0,0 +1,50 @@ +--- +id: 68ba9c4f1688914d72876095 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +The `iframe` element also takes an `src` attribute with a value that indicates the URL or the path of the resource to display. + +Add an `src` attribute of `https://www.youtube.com/embed/I0_951_MPE0` to your `iframe` element. + +At this point, you should see the video displaying on the page, but there are some more attributes you need to add. + +# --hints-- + +Your `iframe` element should have an `src` attribute set to `https://www.youtube.com/embed/I0_951_MPE0`. + +```js +const iframeEl = document.querySelector('iframe') +assert.equal(iframeEl?.getAttribute('src'), 'https://www.youtube.com/embed/I0_951_MPE0') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` 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 new file mode 100644 index 00000000000..7f73627ba82 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876096.md @@ -0,0 +1,79 @@ +--- +id: 68ba9c4f1688914d72876096 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +One of the attributes is `allow`. It's like a permission list that tells the browser what features the `iframe` is allowed to use. + +Here's an `iframe` element with the `allow` attribute: + +```html + +``` + +Add the `allow` attribute with the value `accelerometer`, `autoplay`, and `clipboard-write`. + +`accelerometer` lets the `iframe` use motion sensors so it can detect things like device tilting and rotation. `autoplay` lets the video start playing automatically, and `clipboard-write` lets the iframe write data to the user’s clipboard. + +# --hints-- + +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') +``` + +The `allow` attribute of your `iframe` element should have `autoplay` as one of its values. + +```js +const iframeEl = document.querySelector('iframe') +const iframeElAllowAttr = iframeEl?.getAttribute('allow') +const autoplay = iframeElAllowAttr.trim().split(' ')[1] +assert.strictEqual(autoplay, 'autoplay') +``` + +The `allow` attribute of your `iframe` element should have `clipboard-write` as one of its values. + +```js +const iframeEl = document.querySelector('iframe') +const iframeElAllowAttr = iframeEl?.getAttribute('allow') +const clipboardWrite = iframeElAllowAttr.trim().split(' ')[2] +assert.strictEqual(clipboardWrite, 'clipboard-write') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` 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 new file mode 100644 index 00000000000..7eb7ecdf969 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md @@ -0,0 +1,69 @@ +--- +id: 68ba9c4f1688914d72876097 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Add `encrypted-media`, `gyroscope`, and `web-share` to the existing values in the `allow` attribute. + +These three will allow the use of encrypted media extensions to protect the video, let the iframe pop out into picture-in-picture mode when needed, and allow sharing the iframe content through the device's native share dialogs. + +# --hints-- + +The `allow` attribute of your `iframe` element should have `encrypted-media` as one of its values. + +```js +const iframeEl = document.querySelector('iframe') +const iframeElAllowAttr = iframeEl?.getAttribute('allow') +const encryptedMedia = iframeElAllowAttr.trim().split(' ')[3] +assert.strictEqual(encryptedMedia, 'encrypted-media') +``` + +The `allow` attribute of your `iframe` element should have `gyroscope` as one of its values. + +```js +const iframeEl = document.querySelector('iframe') +const iframeElAllowAttr = iframeEl?.getAttribute('allow') +const gyroscope = iframeElAllowAttr.trim().split(' ')[4] +assert.strictEqual(gyroscope, 'gyroscope') +``` + +The `allow` attribute of your `iframe` element should have `web-share` as one of its values. + +```js +const iframeEl = document.querySelector('iframe') +const iframeElAllowAttr = iframeEl?.getAttribute('allow') +const webShare = iframeElAllowAttr.trim().split(' ')[5] +assert.strictEqual(webShare, 'web-share') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876098.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876098.md new file mode 100644 index 00000000000..02630f01594 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876098.md @@ -0,0 +1,49 @@ +--- +id: 68ba9c4f1688914d72876098 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +The next attribute you'll add is `referrerpolicy`. It is the rule that determines how much detail you share when your page connects to another page. + +Add the `referrerpolicy` attribute and set it to `strict-origin-when-cross-origin`. This shares the full address on the same site, only the site name on other sites, and nothing on insecure sites. + +# --hints-- + +Your `iframe` element should have a `referrerpolicy` attribute set to `strict-origin-when-cross-origin`. + +```js +const iframeEl = document.querySelector('iframe') +assert.equal(iframeEl?.getAttribute('referrerpolicy'), 'strict-origin-when-cross-origin') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876099.md b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876099.md new file mode 100644 index 00000000000..696c6c33b65 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876099.md @@ -0,0 +1,78 @@ +--- +id: 68ba9c4f1688914d72876099 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Last but not least, the attribute you will add is `allowfullscreen`. As it implies, it allows the video to be viewed in full screen mode. + +With that, the workshop is completed! + +# --hints-- + +Your `iframe` element should have a `allowfullscreen` attribute. + +```js +const iframeEl = document.querySelector('iframe') +assert.exists(iframeEl?.getAttribute('allowfullscreen')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +# --solutions-- + +```html + + + + + + Display Videos in an iframe + + +

iframe Video Display

+
+ + + +``` + diff --git a/curriculum/structure/blocks/workshop-build-a-video-display-using-iframe.json b/curriculum/structure/blocks/workshop-build-a-video-display-using-iframe.json new file mode 100644 index 00000000000..1522f320465 --- /dev/null +++ b/curriculum/structure/blocks/workshop-build-a-video-display-using-iframe.json @@ -0,0 +1,20 @@ +{ + "name": "Build a Video Display Using iframe", + "isUpcomingChange": false, + "dashedName": "workshop-build-a-video-display-using-iframe", + "helpCategory": "HTML-CSS", + "blockType": "workshop", + "blockLayout": "challenge-grid", + "challengeOrder": [ + { "id": "68b94f23f7b3ee14078c89c5", "title": "Step 1" }, + { "id": "68ba9c4f1688914d72876093", "title": "Step 2" }, + { "id": "68ba9c4f1688914d72876094", "title": "Step 3" }, + { "id": "68ba9c4f1688914d72876095", "title": "Step 4" }, + { "id": "68ba9c4f1688914d72876096", "title": "Step 5" }, + { "id": "68ba9c4f1688914d72876097", "title": "Step 6" }, + { "id": "68ba9c4f1688914d72876098", "title": "Step 7" }, + { "id": "68ba9c4f1688914d72876099", "title": "Step 8" } + ], + "usesMultifileEditor": true, + "hasEditableBoundaries": true +} diff --git a/curriculum/structure/superblocks/full-stack-developer.json b/curriculum/structure/superblocks/full-stack-developer.json index f3b2b45adb5..12d5e7bebe4 100644 --- a/curriculum/structure/superblocks/full-stack-developer.json +++ b/curriculum/structure/superblocks/full-stack-developer.json @@ -20,6 +20,7 @@ "lecture-working-with-images-and-svgs", "workshop-build-a-heart-icon", "lecture-working-with-media", + "workshop-build-a-video-display-using-iframe", "lab-video-compilation-page", "lecture-working-with-links", "review-basic-html",