Merge pull request #534 from orkes-io/nhandt/NO-TASK/allow_youtube_fu…

…llscreen

[No-Task] fix: allow opening youtube in fullscreen

docs/getting-started/adding-custom-code-worker.md

@@ -24,7 +24,11 @@ Continuing the use case from the previous step, we now have a requirement to add
 </div>
 <div className="col">
 <div className="embed-loom-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/-jx9XuKaL0I?si=1iK2Jb_yRtE_Jvqm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/-jx9XuKaL0I?si=1iK2Jb_yRtE_Jvqm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></div>
 </div>
 </div>
 </TabItem>

docs/getting-started/adding-wait-conditions.md

@@ -29,7 +29,11 @@ Orkes Conductor doesn't limit your wait conditions. We can wait for __mins__, __
 </div>
 <div className="col">
 <div className="embed-loom-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/c1YOgXzd4tg?si=uAG37a-ohc_O8Gkn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/c1YOgXzd4tg?si=uAG37a-ohc_O8Gkn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></div>
 </div>
 </div>
 </TabItem>

docs/getting-started/executing-tasks-in-parallel.md

@@ -29,7 +29,11 @@ Orkes Conductor runs 1000s of parallel executions, limited only by the worker ca
 </div>
 <div className="col col--4">
 <div className="embed-youtube-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/xkRHjAgff0I?si=3N7kE0dmnvj6v_5J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/xkRHjAgff0I?si=3N7kE0dmnvj6v_5J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></div>
 </div>
 </div>
 </TabItem>

docs/getting-started/first-workflow-application.md

@@ -35,7 +35,11 @@ Watch this video and follow the steps below:
 </div>
 <div className="col ui-instructions-padding">
 <div className="embed-loom-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/ViN4iORqg_w?si=HabdCRhkDyyp_3E3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/ViN4iORqg_w?si=HabdCRhkDyyp_3E3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+        mozallowfullscreen="mozallowfullscreen"
+        msallowfullscreen="msallowfullscreen"
+        oallowfullscreen="oallowfullscreen"
+        webkitallowfullscreen="webkitallowfullscreen"></iframe></div>
 </div>
 </div>
 </TabItem>
@@ -59,7 +63,12 @@ You can run this workflow to see how it executes. If there are failures, Conduct
 </div>
 <div className="col">
 <div className="embed-loom-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/b8-0FDIZDp4?si=Hb2I9-iewyTJ-H2R" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/b8-0FDIZDp4?si=Hb2I9-iewyTJ-H2R" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe>
 </div>
 </div>
 </div>

docs/getting-started/running-an-inline-function.md

@@ -25,7 +25,11 @@ So far, we haven't done anything here, even if the fraud check fails. How can we
 </div>
 <div className="col">
 <div className="embed-loom-video">
-<iframe width="500" height="315" src="https://www.youtube.com/embed/y66AKuKLf2s?si=yaYNEazXWoh1tExU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<iframe width="500" height="315" src="https://www.youtube.com/embed/y66AKuKLf2s?si=yaYNEazXWoh1tExU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></div>
 </div>
 </div>
 </TabItem>

docs/how-to-videos/access-key-and-secret.md

@@ -2,4 +2,8 @@
 
 Watch how we can get an access key and secret to use with our SDKs or direct API calls.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/f1b5vZRKn2Q?si=bIzOcN2tRbXD28Hq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/f1b5vZRKn2Q?si=bIzOcN2tRbXD28Hq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>

docs/how-to-videos/app-management.md

@@ -2,5 +2,9 @@
 
 Watch how we can configure and manage Applications and its access from the UI.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/PY34TcVzof0?si=ANSHZW6IMVDx1rI9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/PY34TcVzof0?si=ANSHZW6IMVDx1rI9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>
 

docs/how-to-videos/group-management.md

@@ -2,4 +2,8 @@
 
 Watch how we can manage groups in Orkes Conductor Platform.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/REIRIjEvJLg?si=h28wjxj9DZi7A6bE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/REIRIjEvJLg?si=h28wjxj9DZi7A6bE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>

docs/how-to-videos/login-to-playground.md

@@ -3,6 +3,10 @@
 Watch how we can login to Orkes Conductor Playground UI.
 
 <center>
-<iframe width="890" height="500" src="https://www.youtube.com/embed/tVUaDtoKNgE?si=lBctmC1SeuIr0xtL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe width="890" height="500" src="https://www.youtube.com/embed/tVUaDtoKNgE?si=lBctmC1SeuIr0xtL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe>
 </center>
 

docs/how-to-videos/run-workflow.md

@@ -2,5 +2,9 @@
 
 Watch how we can run a workflow from UI.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/_cy9lIYJwmo?si=bExth8UNYEXnRRkd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/_cy9lIYJwmo?si=bExth8UNYEXnRRkd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>
 

docs/how-to-videos/secrets.md

@@ -2,4 +2,8 @@
 
 Watch how we can manage secrets in Orkes Conductor Platform.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/kw5qUUaxj_w?si=zRjSe0ENlwx7yiy5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/kw5qUUaxj_w?si=zRjSe0ENlwx7yiy5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>

docs/how-to-videos/tags.md

@@ -2,4 +2,8 @@
 
 Watch how we can use tags to manage permissions in Orkes Conductor Platform.
 
-<center><iframe width="890" height="500" src="https://www.youtube.com/embed/qFHDwh2a_l4?si=DqWsT7_NgMv5ZZgx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="890" height="500" src="https://www.youtube.com/embed/qFHDwh2a_l4?si=DqWsT7_NgMv5ZZgx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>

docs/how-to-videos/user-management.md

@@ -3,6 +3,10 @@
 Watch how we can configure and manage Users from the UI.
 
 <center>
-<iframe width="890" height="500" src="https://www.youtube.com/embed/O9lj4TAqldc?si=wOxzv26EzeI5pft1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe width="890" height="500" src="https://www.youtube.com/embed/O9lj4TAqldc?si=wOxzv26EzeI5pft1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe>
 </center>
 

docs/templates/alerting/scanning-an-endpoint-and-triggering-pagerduty-alert.md

@@ -204,5 +204,9 @@ Similar to how we maintain API tokens, we can maintain the API keys / secrets fo
 ## Video Guide
 
 <center>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/bg3c14gMkQ8?si=P8WlVXLAkqM445lw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/bg3c14gMkQ8?si=P8WlVXLAkqM445lw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe>
 </center>

docs/templates/examples/keep-worker-running-until-condition-true.md

@@ -17,7 +17,11 @@ when you don't have an endpoint to call directly from Conductor.
 ```java dynamic https://github.com/conductor-sdk/orkes-java-springboot2-example/blob/main/src/main/java/io/orkes/example/banking/workers/PollUntilConditionMeetsWorker.java section=1 ../workers/PollUntilConditionMeetsWorker.java
 ```
 
-<center><iframe width="560" height="315" src="https://www.youtube.com/embed/nI8IcSpzBLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+<center><iframe width="560" height="315" src="https://www.youtube.com/embed/nI8IcSpzBLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"
+mozallowfullscreen="mozallowfullscreen"
+msallowfullscreen="msallowfullscreen"
+oallowfullscreen="oallowfullscreen"
+webkitallowfullscreen="webkitallowfullscreen"></iframe></center>
 
 In this example worker, we use the `callbackAfterSeconds` attribute to keep the worker in progress
 until a condition is met. This can be any arbitrary condition that our code defines.

src/components/_Sections.js

@@ -359,6 +359,11 @@ export const VideoSection = ({}) => (
               width="100%"
               height="230px"
               src={item.src}
+              allowfullscreen="allowfullscreen"
+              mozallowfullscreen="mozallowfullscreen"
+              msallowfullscreen="msallowfullscreen"
+              oallowfullscreen="oallowfullscreen"
+              webkitallowfullscreen="webkitallowfullscreen"
             ></iframe>
             <h4 className="padding-top--sm padding-left--sm">{item.title}</h4>
           </div>