javascript - 在 SweetAlert 中显示视频

Question

下午好，我正在使用 SweetAlert 显示通知，查看官方 SweetAlert 文档，它们显示了一些示例，例如显示图像，但我想做的是显示一个 youtube 视频。

SweetAlert2

Swal.fire({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: 'https://unsplash.it/400/200',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
})

任何在 SweetAlert 上显示 Youtube 视频的建议。

我做过的一些例子是用 iframe 嵌入视频：

<iframe width="560" height="315" src="https://www.youtube.com/embed/d_elXY2Lcfk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

但我只想通过放置我可以看到视频的路径来做到这一点。

Answer 1

在文档中，您可以使用自定义 html 作为警报正文

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html:
    '<iframe width="560" height="315" src="https://www.youtube.com/embed/d_elXY2Lcfk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: 'Thumbs down'
})