feat: review youtube video implementation for insecure iframe (#3339)

anvilproject · Nov 8, 2024 · f9c0f58 · f9c0f58
1 parent 86b150a
commit f9c0f58
Show file tree

Hide file tree

Showing 46 changed files with 121 additions and 168 deletions.
diff --git a/components/common/Video/video.tsx b/components/common/Video/video.tsx
@@ -1,14 +1,12 @@
-import { useEffect, useState } from "react";
-import ReactPlayer from "react-player";
-
-// React Player works only in the browser environment; to prevent hydration errors, the "mounted" state is required.
-
 export const Video = ({ ...props }): JSX.Element | null => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return mounted ? <ReactPlayer height="100%" width="100%" {...props} /> : null;
+  return (
+    <iframe
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      height="100%"
+      sandbox="allow-scripts allow-same-origin allow-presentation"
+      width="100%"
+      {...props}
+    />
+  );
 };
diff --git a/docs/events/anvil2023-april-demos.mdx b/docs/events/anvil2023-april-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer any questions about the demo
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/0PRCFkLZOeo" />
+<Video src="https://www.youtube.com/embed/0PRCFkLZOeo" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-august-demos.mdx b/docs/events/anvil2023-august-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/_uT0IWL1wso" />
+<Video src="https://www.youtube.com/embed/_uT0IWL1wso" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-december-demos.mdx b/docs/events/anvil2023-december-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/yAwQKft1LS8" />
+<Video src="https://www.youtube.com/embed/yAwQKft1LS8" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-july-demos.mdx b/docs/events/anvil2023-july-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/k2DfF3tk6M4" />
+<Video src="https://www.youtube.com/embed/k2DfF3tk6M4" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-june-demos.mdx b/docs/events/anvil2023-june-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer any questions about the demo
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/1vz4kupdkms" />
+<Video src="https://www.youtube.com/embed/1vz4kupdkms" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-march-demos.mdx b/docs/events/anvil2023-march-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer any questions about the demo
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/fcMUU7NrEeM" />
+<Video src="https://www.youtube.com/embed/fcMUU7NrEeM" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-may-demos.mdx b/docs/events/anvil2023-may-demos.mdx
@@ -23,7 +23,7 @@ After the demo, we’ll open up the floor to answer any questions about the demo
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/omaVZgU4aJ0" />
+<Video src="https://www.youtube.com/embed/omaVZgU4aJ0" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-october-demos.mdx b/docs/events/anvil2023-october-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/BVmOtH04qhI" />
+<Video src="https://www.youtube.com/embed/BVmOtH04qhI" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2023-september-demos.mdx b/docs/events/anvil2023-september-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What’s in this Demo?
 
-<Video url="https://youtu.be/loApm3jUkG0" />
+<Video src="https://www.youtube.com/embed/loApm3jUkG0" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2024-june-demos.mdx b/docs/events/anvil2024-june-demos.mdx
@@ -28,7 +28,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What's in this Demo?
 
-<Video url="https://youtu.be/IB3c-6UpocI" />
+<Video src="https://www.youtube.com/embed/IB3c-6UpocI" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2024-may-demos.mdx b/docs/events/anvil2024-may-demos.mdx
@@ -23,7 +23,7 @@ After the demo, we’ll open up the floor to answer questions about the demo and
 
 ## What's in this Demo?
 
-<Video url="https://youtu.be/44X-m-JLPTA" />
+<Video src="https://www.youtube.com/embed/44X-m-JLPTA" />
 
 ### 11:00 AM - 11:30 AM ET – Demo on AnVIL
 

diff --git a/docs/events/anvil2024-october-demos.mdx b/docs/events/anvil2024-october-demos.mdx
@@ -24,7 +24,7 @@ title: "AnVIL Demos"
 
 In this demo, Robert Carroll discussed key considerations for setting up a data model when planning for AnVIL data submission.
 
-<Video url="https://youtu.be/nIqQsse1aYM" />
+<Video src="https://www.youtube.com/embed/nIqQsse1aYM" />
 
 ### 11:30 AM - 12:00 PM ET – Q&A
 

diff --git a/docs/events/ismb2020-finding-and-analyzing-data-in-the-cloud.mdx b/docs/events/ismb2020-finding-and-analyzing-data-in-the-cloud.mdx
@@ -58,32 +58,32 @@ Videos of this workshop can be found below. Videos for the entire ISMB 2020 even
 
 ### TT02- I - Intro to Terra Overview - Tiffany Miller - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/pDXU0E5peY0" />
+<Video src="https://www.youtube.com/embed/pDXU0E5peY0" />
 
 ### TT02-II - Get set up in Terra - Allie Hajian - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/l7iN_kx7O_Q" />
+<Video src="https://www.youtube.com/embed/l7iN_kx7O_Q" />
 
 ### TT02-III - Data and documentation in a Workspace - Tiffany Miller - Tutorials - ISMB 2
 
-<Video url="https://youtu.be/ICMoaHGG0Xk" />
+<Video src="https://www.youtube.com/embed/ICMoaHGG0Xk" />
 
 ### TT02-IV - Find and import workflows in Dockstore - Tiffany Miller - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/1K5TYtYR-9s" />
+<Video src="https://www.youtube.com/embed/1K5TYtYR-9s" />
 
 ### TT02-V - Set up and run your workflow - Tiffany Miller - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/dsjWZGYfCp8" />
+<Video src="https://www.youtube.com/embed/dsjWZGYfCp8" />
 
 ### TT02-VI - Workflows outputs and troubleshooting - Jason Cerrato - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/GjNK_9bQVYQ" />
+<Video src="https://www.youtube.com/embed/GjNK_9bQVYQ" />
 
 ### TT02-VII - Interactive analysis plus Hail intro - Allie Hajian - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/uCiffYZMQJg" />
+<Video src="https://www.youtube.com/embed/uCiffYZMQJg" />
 
 ### TT02-VIII - Bioconductor for RNA seq analysis - Liz Kiernan - Tutorials - ISMB 2020
 
-<Video url="https://youtu.be/uu89DvjKJ8o" />
+<Video src="https://www.youtube.com/embed/uu89DvjKJ8o" />
diff --git a/docs/events/ncpi2022-spring-workshop-nih-cloud-platforms-interoperability.mdx b/docs/events/ncpi2022-spring-workshop-nih-cloud-platforms-interoperability.mdx
@@ -43,11 +43,11 @@ Recordings of Day 1 and Day 2 of the workshop can be found below.
 
 ### Day 1
 
-<Video url="https://youtu.be/gw92xQQOPQ4" />
+<Video src="https://www.youtube.com/embed/gw92xQQOPQ4" />
 
 ### Day 2
 
-<Video url="https://youtu.be/N8RLWqA5U40" />
+<Video src="https://www.youtube.com/embed/N8RLWqA5U40" />
 
 ## Agenda
 

diff --git a/docs/events/vadsti2021.mdx b/docs/events/vadsti2021.mdx
@@ -55,8 +55,8 @@ For more information and to register see [Virtual Applied Data Science Training
 
 ### Tools for Applied Data Science Using Cloud-Based Platform, Module 7, Day 1
 
-<Video url="https://youtu.be/CdqoGck2ht8" />
+<Video src="https://www.youtube.com/embed/CdqoGck2ht8" />
 
 ### Tools for Applied Data Science Using Cloud-Based Platform - Module 7, Day 2
 
-<Video url="https://youtu.be/6S0yOvgISVI" />
+<Video src="https://www.youtube.com/embed/6S0yOvgISVI" />
diff --git a/docs/guides/content/adding-youtube-videos.mdx b/docs/guides/content/adding-youtube-videos.mdx
@@ -15,9 +15,9 @@ To include a YouTube video in your page:
 To reference the video we use markdown like:
 
 ```
-<Video url="https://youtu.be/1JWOVGzzgMc" />
+<Video src="https://www.youtube.com/embed/1JWOVGzzgMc" />
 ```
 
 This renders like:
 
-<Video url="https://youtu.be/1JWOVGzzgMc" />
+<Video src="https://www.youtube.com/embed/1JWOVGzzgMc" />
diff --git a/docs/learn/analysis-workflows/running-galaxy-workflows-from-dockstore.mdx b/docs/learn/analysis-workflows/running-galaxy-workflows-from-dockstore.mdx
@@ -7,8 +7,8 @@ title: "Running Galaxy Workflows from Dockstore"
 
 ## How to launch Galaxy workflows from Dockstore (Part 1)
 
-<Video url="https://youtu.be/U8rQiwLceZg" />
+<Video src="https://www.youtube.com/embed/U8rQiwLceZg" />
 
 ## How to launch Galaxy workflows from Dockstore (Part 2)
 
-<Video url="https://youtu.be/aYShFs9tZ6s" />
+<Video src="https://www.youtube.com/embed/aYShFs9tZ6s" />
diff --git a/docs/learn/anvil-mooc/cloud-computing.mdx b/docs/learn/anvil-mooc/cloud-computing.mdx
@@ -5,7 +5,7 @@ title: "AnVIL MOOC - Cloud Computing"
 
 # Cloud Computing
 
-<Video url="https://youtu.be/AUCsYjU4Hus" />
+<Video src="https://www.youtube.com/embed/AUCsYjU4Hus" />
 
 ## Objectives
 

diff --git a/docs/learn/anvil-mooc/cloud-costs.mdx b/docs/learn/anvil-mooc/cloud-costs.mdx
@@ -13,7 +13,7 @@ title: "AnVIL MOOC - Cloud Costs"
 
 ## Video Presentation
 
-<Video url="https://youtu.be/XLR0Ol8vQaE" />
+<Video src="https://www.youtube.com/embed/XLR0Ol8vQaE" />
 
 ## Slides
 

diff --git a/docs/learn/anvil-mooc/use-case-eqtl.mdx b/docs/learn/anvil-mooc/use-case-eqtl.mdx
@@ -5,7 +5,7 @@ title: "AnVIL MOOC - Use Case: eQTL"
 
 # Use Case: eQTL
 
-<Video url="https://youtu.be/nzONmqijg34" />
+<Video src="https://www.youtube.com/embed/nzONmqijg34" />
 
 ## Objectives
 

diff --git a/docs/learn/anvil-mooc/use-case-gatk.mdx b/docs/learn/anvil-mooc/use-case-gatk.mdx
@@ -5,7 +5,7 @@ title: "AnVIL MOOC - Use Case: GATK"
 
 # Use Case: GATK
 
-<Video url="https://youtu.be/JQPX0vdIQ50" />
+<Video src="https://www.youtube.com/embed/JQPX0vdIQ50" />
 
 ## Objectives
 

diff --git a/docs/learn/anvil-mooc/use-case-gwas.mdx b/docs/learn/anvil-mooc/use-case-gwas.mdx
@@ -5,7 +5,7 @@ title: "AnVIL MOOC - Use Case: GWAS"
 
 # Use Case: GWAS
 
-<Video url="https://youtu.be/0OAYUM2Bym0" />
+<Video src="https://www.youtube.com/embed/0OAYUM2Bym0" />
 
 ## Objectives
 

diff --git a/docs/learn/anvil-mooc/what-is-anvil.mdx b/docs/learn/anvil-mooc/what-is-anvil.mdx
@@ -5,7 +5,7 @@ title: "AnVIL MOOC - What is AnVIL?"
 
 # What is AnVIL?
 
-<Video url="https://youtu.be/PoNDxLoAf4k" />
+<Video src="https://www.youtube.com/embed/PoNDxLoAf4k" />
 
 ## Objectives
 

diff --git a/docs/learn/data-analysts/galaxy-gsg-video.mdx b/docs/learn/data-analysts/galaxy-gsg-video.mdx
@@ -5,7 +5,7 @@ title: "Starting Galaxy on the AnVIL Platform"
 
 # Starting Galaxy
 
-<Video url="https://youtu.be/ysLHv4e6X6Y" />
+<Video src="https://www.youtube.com/embed/ysLHv4e6X6Y" />
 
 ## Objectives
 

diff --git a/docs/learn/data-analysts/jupyter-gsg-video.mdx b/docs/learn/data-analysts/jupyter-gsg-video.mdx
@@ -5,7 +5,7 @@ title: "Starting Jupyter on the AnVIL Platform"
 
 # Starting Jupyter
 
-<Video url="https://youtu.be/T5xCxFHGpPE" />
+<Video src="https://www.youtube.com/embed/T5xCxFHGpPE" />
 
 ## Objectives
 

diff --git a/docs/learn/data-analysts/participant-stories.mdx b/docs/learn/data-analysts/participant-stories.mdx
@@ -7,4 +7,4 @@ title: "Participant Stories"
 
 This week we turn the table and ask participants to share their own use of AnVIL.
 
-<Video url="https://youtu.be/77_keFofsu8" />
+<Video src="https://www.youtube.com/embed/77_keFofsu8" />
diff --git a/docs/learn/data-analysts/reproducible-research-with-anvilpublish.mdx b/docs/learn/data-analysts/reproducible-research-with-anvilpublish.mdx
@@ -7,7 +7,7 @@ title: "Reproducible research with AnVILPublish"
 
 An exploration of elements of reproducible research with the AnVILPublish package. We will illustrate how to make a docker container tailored for publishing AnVIL packages and then emphasize the merits of an R package structure for organizing research activities in a manner that emphasizes provenance and reproducibility.
 
-<Video url="https://youtu.be/19upPoqNpx0" />
+<Video src="https://www.youtube.com/embed/19upPoqNpx0" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>

diff --git a/docs/learn/data-analysts/rstudio-gsg-video.mdx b/docs/learn/data-analysts/rstudio-gsg-video.mdx
@@ -5,7 +5,7 @@ title: "Starting RStudio on the AnVIL Platform"
 
 # Starting RStudio
 
-<Video url="https://youtu.be/cdkNbdhxUPc" />
+<Video src="https://www.youtube.com/embed/cdkNbdhxUPc" />
 
 ## Objectives
 

diff --git a/docs/learn/data-analysts/running-a-workflow.mdx b/docs/learn/data-analysts/running-a-workflow.mdx
@@ -9,7 +9,7 @@ title: "Running a workflow: Bulk RNASeq differential expression from FASTQ files
 
 How to configure and run a workflow, based on the Bioconductor-Workflow-DESeq2 workspace. The workflow starts with FASTQ files and transforms them using salmon to the inputs required for Bioconductor DESeq2 analysis of differential expression.
 
-<Video url="https://youtu.be/CT82tcJTA0c" />
+<Video src="https://www.youtube.com/embed/CT82tcJTA0c" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>

diff --git a/...ingle-cell-rnaseq-with-orchestrating-single-cell-analysis-in-r-bioconductor.mdx b/...ingle-cell-rnaseq-with-orchestrating-single-cell-analysis-in-r-bioconductor.mdx
@@ -9,7 +9,7 @@ title: "Single-cell RNASeq with 'Orchestrating Single Cell Analysis' in R / Bioc
 
 An introduction to a resource, developed primarily by Aaron Lun of Genentech, Inc., that employs Bioconductor resources for many aspects of the analysis of single-cell RNA-seq data. The resource is a "computable book" written in R Markdown, published at [https://bioconductor.org/books/release/OSCA](https://bioconductor.org/books/release/OSCA/).
 
-<Video url="https://youtu.be/0LfpVe-MmGE" />
+<Video src="https://www.youtube.com/embed/0LfpVe-MmGE" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>

diff --git a/docs/learn/data-analysts/the-r-bioconductor-anvil-package.mdx b/docs/learn/data-analysts/the-r-bioconductor-anvil-package.mdx
@@ -9,7 +9,7 @@ title: "The R / Bioconductor AnVIL package for easy access to buckets, data, and
 
 An exploration of how workspaces provide a framework for managing data and large-scale analyses using the HCA Optimus Pipeline and 1000G-high-coverage-2019 workspaces and R using the AnVIL package.
 
-<Video url="https://youtu.be/DO6RjmGjIZA" />
+<Video src="https://www.youtube.com/embed/DO6RjmGjIZA" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>

diff --git a/docs/learn/data-analysts/using-anvil-for-teaching-r-bioconductor.mdx b/docs/learn/data-analysts/using-anvil-for-teaching-r-bioconductor.mdx
@@ -9,7 +9,7 @@ title: "Using AnVIL for Teaching R / Bioconductor"
 
 A case study of using AnVIL to teach R for a Biostatistics course and provides essentials for using AnVIL for other instructional efforts.
 
-<Video url="https://youtu.be/U28gdlVg958" />
+<Video src="https://www.youtube.com/embed/U28gdlVg958" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>

diff --git a/docs/learn/data-analysts/using-r-bioconductor-in-anvil.mdx b/docs/learn/data-analysts/using-r-bioconductor-in-anvil.mdx
@@ -9,7 +9,7 @@ title: "Using R / Bioconductor in AnVIL"
 
 An introduction to the AnVIL cloud computing environment. We learn how to create a Google account to use in AnVIL. We explore key concepts related to workspaces and billing projects. We explore creating a Jupyter notebooks-based cloud environment, and an RStudio cloud environment.
 
-<Video url="https://youtu.be/8Ccj__2GqJ4" />
+<Video src="https://www.youtube.com/embed/8Ccj__2GqJ4" />
 
 <Alert icon={false} severity="info">
   <AlertTitle>Notes</AlertTitle>