3.5. Embedding videos into TechDocs

Procedure

1. In the section of the TechDocs file that you want to embed a video into, add the following configuration:

   <iframe
     width="<video_width>"
     height="<video_height>"
     src="<video_url>"
     title="<video_title>"
     frameborder="<frame_border>"
     allow="picture-in-picture"
     allowfullscreen>
   </iframe>

   where

   <video_width>

   Specifies the width of the video in number of pixels, for example, 672.

   <video_height>

   Specifies the height of the video in number of pixels, for example, 378.

   <video_url>

   Specifies the url of the video, for example, https://www.youtube.com/watch?v=LB1w8hjBt5k.

   <video_title>

   Specifies the title of the video, for example, Red Hat Developer Hub Overview Video.

   <frame_border>

   Specifies the size of the frame border in number of pixels, for example, 0. Use a value of 0 for no border.

   注意

   TechDocs uses DOMPurify to sanitize HTML. To prevent DOMPurify from removing the <iframe> elements, you must list every permitted video host, such as www.youtube.com, under the techdocs.sanitizer.allowedIframeHosts section of your app-config.yaml file. You must also add the video host to the backend.csp section of your app-config.yaml file.

2. In the frame-src and allowedIframeHosts fields of your app-config.yaml file, add any video hosts that you want to use. You can add multiple hosts. For example:

   backend:
           csp:
   connect-src: ['https:']
   frame-src: ['https://www.youtube.com/']
   techdocs:
     builder: external
     sanitizer:
       allowedIframeHosts:
         - www.youtube.com
         - <additional_video_host_url>
     publisher:
       type: awsS3
       awsS3:
         bucketName: ${AWS_S3_BUCKET_NAME}
         accountId: ${AWS_ACCOUNT_ID}
         region: ${AWS_REGION}