Youtube videos (#464)

Carlos Santana · web-flow · commit 601d1cde76df · 2021-05-27T23:54:20.000-04:00
* make youtube videos play in website embedded

Signed-off-by: Carlos Santana &lt;csantana23@gmail.com&gt;

* make youtube video play

Signed-off-by: Carlos Santana &lt;csantana23@gmail.com&gt;

* fix spell check for youtube video iframe

Signed-off-by: Carlos Santana &lt;csantana23@gmail.com&gt;
diff --git a/cspell.json b/cspell.json
@@ -82,7 +82,9 @@
         "buildah",
         "skopeo",
         "toolkit's",
-        "mynamespace"
+        "mynamespace",
+        "autoplay",
+        "allowfullscreen"
     ],
     // flagWords - list of words to be always considered incorrect
     // This is useful for offensive words and common spelling errors.
diff --git a/docs/adopting/best-practices/devops.md b/docs/adopting/best-practices/devops.md
@@ -4,9 +4,7 @@
 
 This short video introduces the concepts of DevOps with Red Hat OpenShift:
 
-Click the image below to launch the video
-
-[!["DevOps concepts with Red Hat OpenShift`"](http://img.youtube.com/vi/GOPWObjFTsI/0.jpg)](https://youtu.be/GOPWObjFTsI "DevOps concepts with Red Hat OpenShift"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/GOPWObjFTsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Continuous Delivery
 
diff --git a/docs/contribute/documentation.md b/docs/contribute/documentation.md
@@ -121,29 +121,18 @@ External links can also use attribute lists to control behaviors, such as open i
 [MkDocs](http://mkdocs.org){: target="_blank" .external }
 ```
 
+!!!info
+    You can use `{: target=_blank}` to create clickable images that launch to another site: `[![Image description](Image URL)](target URL "hover text"){: target=_blank}`
+
 #### YouTube videos
 
-It is not possible to embed a YouTube video and have it play in place using pure markdown.  You can use HTML to embed a video:
+It is possible to embed a YouTube video and have it play in place using pure markdown.  You can use HTML to embed a video:
 
 ```html
-<iframe width="560" height="315" src="https://www.youtube.com/embed/u3PTRqkd94k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-```
-
-but you can use a link that will open the video in a new browser tab using pure markdown:
-
-```markdown
-[![alt-content](img URL)](video URL "video title"){: target="_blank"}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/V-BFLaPdoPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 ```
 
-where:
-
-- alt-content is the content used if the image cannot be displayed by the browser
-- img URL is the URL for the thumbnail image for the video.  For YouTube this is usually `http://img.youtube.com/vi/<video ID>/0.jpg`
-- video URL is the URL used to launch the video in a new tab (this can be found by opening the video on YouTube and capturing the URL from the browser address bar - this also provides the video ID to be used in the image). It typically looks like `https://youtu.be/u3PTRqkd94k` or `https://www.youtube.com/watch?v=u3PTRqkd94k`
-- video title is a string that is displayed to the viewer when they hover over the video image
 
-!!!info
-    You can also use the same technique to create clickable images that launch to another site: `[![Image description](Image URL)](target URL "hover text"){: target=_blank}`
 
 ### Tabs
 
@@ -278,15 +267,15 @@ To use inline you simply enclose the text using a single back quote **\`** chara
 
 When you want to include a block of code you use a *fence*, which is 3 back quote character at the start and end of the block.  After the opening quotes you should also specify the content type contained in the block.
 
-**\`\`\` shell**  
-**oc get pods**  
-**\`\`\`**  
+**\`\`\` shell**
+**oc get pods**
+**\`\`\`**
 
 which will produce:
 
-``` shell  
-oc get pods  
-```  
+``` shell
+oc get pods
+```
 
 Notice that the block automatically gets the *copy to clipboard* link to allow easy copy and paste.
 
diff --git a/docs/learning/devops.md b/docs/learning/devops.md
@@ -4,9 +4,7 @@
 
 This short video introduces the concepts of DevOps with Red Hat OpenShift:
 
-Click the image below to launch the video
-
-[!["DevOps concepts with Red Hat OpenShift`"](http://img.youtube.com/vi/GOPWObjFTsI/0.jpg)](https://youtu.be/GOPWObjFTsI "DevOps concepts with Red Hat OpenShift"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/GOPWObjFTsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Continuous Delivery
 
@@ -60,9 +58,9 @@ For the full end-to-end build and delivery process, both the CI and CD pipelines
     !!!Note
         It is also possible to trigger a process when a new image is available in the image registry or a new artifact is available to the artifact management system.
 
-        In this case, the CI process could be split into two parts: 
-        
-            1. create the container image and artifacts, and 
+        In this case, the CI process could be split into two parts:
+
+            1. create the container image and artifacts, and
             2. update the GitOps repo with the available artifacts.
 
 4. Changes to the GitOps repository trigger the CD pipeline to run
diff --git a/docs/overview/overview.md b/docs/overview/overview.md
@@ -5,7 +5,7 @@
 Cloud-Native Toolkit is an open-source collection of assets that provide an environment for developing
 cloud-native applications for deployment within Red Hat OpenShift and Kubernetes. It embodies IBM Garage Method principles and practices for consistently developed applications, incorporating best practices that increase developer velocity for efficient delivery of business value.
 
-<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/u3PTRqkd94k?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/u3PTRqkd94k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Cloud-Native Toolkit objectives
 
diff --git a/docs/resources/ibm-cloud/access-control.md b/docs/resources/ibm-cloud/access-control.md
@@ -14,9 +14,7 @@ This video presentation describes the IAM concepts, shows a demonstration, and i
 - 26:00 -- Demonstration
 - 46:00 -- Q&A
 
-Click the image below to launch the video
-
-[!["IBM Cloud Resources Groups"](http://img.youtube.com/vi/eayMGvkLZmI/0.jpg)](https://youtu.be/eayMGvkLZmI "IBM Cloud Resources Groups"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/eayMGvkLZmI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 This article explains the concepts described in the video. You can access the presentation in the [Office Hours](https://ibm.box.com/v/Office-Hours) folder in Box. The scripts described in the [reference section](../../reference/iteration-zero/terraform.md){: target=_blank}.
 
@@ -202,6 +200,4 @@ This video presentation shows how to perform this process:
 - 13:16 -- Configure Account
 - 27:44 -- Demo the access groups
 
-Click the image below to launch the video
-
-[!["Configure an IBM Cloud account using IAM"](http://img.youtube.com/vi/EF-gN0WRhE8/0.jpg)](https://youtu.be/EF-gN0WRhE8 "Configure an IBM Cloud account using IAM"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/EF-gN0WRhE8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
diff --git a/docs/resources/workshop/appmod.md b/docs/resources/workshop/appmod.md
@@ -2,9 +2,7 @@
 
 <!--- cSpell:ignore wfish rbarcia appmod -->
 
-Click on image below to launch video:
-
-[!["Workshop: App Modernization"](http://img.youtube.com/vi/ss9joPm2M1U/0.jpg)](https://youtu.be/ss9joPm2M1U "Workshop: App Modernization"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/ss9joPm2M1U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 This section will cover:
 
diff --git a/docs/resources/workshop/cd.md b/docs/resources/workshop/cd.md
@@ -2,9 +2,7 @@
 
 Promote an Application using CD with GitOps and ArgoCD
 
-Click on image below to launch video:
-
-[!["Workshop: CD/GitOps with ArgoCD"](http://img.youtube.com/vi/Fr85xbcM_es/0.jpg)](https://youtu.be/Fr85xbcM_es "Workshop: CD/GitOps with ArgoCD"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/Fr85xbcM_es" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 1. Prerequisites
     - Complete lab [Deploy an Application using CI Pipelines with Tekton](ci.md).
diff --git a/docs/resources/workshop/ci.md b/docs/resources/workshop/ci.md
@@ -2,9 +2,7 @@
 
 <!--- cSpell:ignore userx -->
 
-Click on image below to launch video:
-
-[!["Workshop: CI Pipelines with Tekton"](http://img.youtube.com/vi/V-BFLaPdoPo/0.jpg)](https://youtu.be/V-BFLaPdoPo "Workshop: CI Pipelines with Tekton"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/V-BFLaPdoPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 1. Prerequisites
     - The instructor should [Setup Workshop Environment](setup.md)
diff --git a/docs/resources/workshop/inventory.md b/docs/resources/workshop/inventory.md
@@ -2,9 +2,7 @@
 
 Deploy a 3 tier Microservice using React, Node.js, and Java
 
-Click on image below to launch video:
-
-[!["Workshop: Microservice Inventory App"](http://img.youtube.com/vi/gvuJi7qEZck/0.jpg)](https://youtu.be/gvuJi7qEZck "Workshop: Microservice Inventory App"){: target=_blank}
+<iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/gvuJi7qEZck" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 1. Prerequisites
     - The instructor should [Setup Workshop Environment](setup.md)
