在 SweetAlert 中显示视频

问题描述

下午好，我正在使用 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>

但我希望通过放置我可以看到视频的路径来实现。

解决方法

在文档中，您可以使用自定义 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'
})