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
+
+
+