3.5. 将视频嵌入到 TechDocs 中

流程

1. 在您要嵌入视频的 TechDocs 文件中，添加以下配置：

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

   其中

   <video_width>

   指定视频的宽度，以 pixels 数指定，例如 672。

   <video_height>

   指定视频的高度，例如 pixels，例如 378。

   <video_url>

   指定视频的 url，例如 https://www.youtube.com/watch?v=LB1w8hjBt5k。

   <video_title>

   指定视频的标题，例如 Red Hat Developer Hub 概述视频。

   <frame_border>

   以 pixels 数指定帧 border 的大小，例如 0。值 0 代表没有 border。

   注意

   HEKETI 使用 DOMPurify 来清理 HTML。要防止 DOMPurify 移除 &lt ;iframe > 元素，您必须在 app-config.yaml 文件的 HEKETI. sanitizer.allowedIframeHosts 部分中列出每个允许的视频主机，如 www.youtube.com。您还必须将视频主机添加到 app-config.yaml 文件的 backend.csp 部分。

2. 在 app-config.yaml 文件的 frame-src 和 allowedIframeHosts 字段中，添加您要使用的任何视频主机。您可以添加多个主机。例如：

   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}