如何在Javascript警报弹出窗口中嵌入Youtube视频

Question

我正在努力找出如何最好地将Youtube视频嵌入到Javascript函数中，使其显示(并可播放(在弹出警报框中。

这是我正在使用的代码：

<script>
function myFunction12() {
alert("");
}
</script>

我要插入的视频在这里：https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2wn

我一直在尝试在警报报价中使用Youtube提供的嵌入代码，但它无法识别HTML，我不知道如何继续。视频需要在弹出框中显示和播放。

提前感谢您的任何提示！我刚开始写Javascript，可能会问一些后续问题。

编辑：我现在正在创建一个模式框，当用户点击图像地图上的"1"时，它会弹出视频。我认为组件是正确的，但我无法将两者连接起来。如有任何建议，我们将不胜感激！

我的代码在这里：w3schools.com/code/tryit.asp？filename=FXKTC5KYZEEL

Answer 1

你不能；请改用模态

据我所知，不可能在警报弹出窗口中嵌入视频，因为它只显示明文。Youtube嵌入是通过使用iframe元素创建的，这意味着视频不能放在传统的Javascriptalert()弹出窗口中。

相反，如果你想要一个视频，你可能应该有一些Javascript，它可以创建或取消隐藏包含你想要的视频的元素。如果视频不是恒定的，你也可以用javascript设置它的url。

Answer 2

您可以使用ALertifyJS。你可以在外面点击。你必须使用Youtube对话提醒。我在下面的片段中使用了CDN。下载链接-

https://alertifyjs.com/build/alertifyjs.zip

alertify.YoutubeDialog || alertify.dialog('YoutubeDialog', function() {
var iframe;
return {
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
main: function(videoId) {
//set the videoId setting and return current instance for chaining.
return this.set({
'videoId': videoId
});
},
// we only want to override two options (padding and overflow).
setup: function() {
return {
options: {
//disable both padding and overflow control.
padding: !1,
overflow: !1,
}
};
},
// This will be called once the DOM is ready and will never be invoked again.
// Here we create the iframe to embed the video.
build: function() {
// create the iframe element
iframe = document.createElement('iframe');
iframe.frameBorder = "no";
iframe.width = "100%";
iframe.height = "100%";
// add it to the dialog
this.elements.content.appendChild(iframe);
//give the dialog initial height (half the screen height).
this.elements.body.style.minHeight = screen.height * .5 + 'px';
},
// dialog custom settings
settings: {
videoId: undefined
},
// listen and respond to changes in dialog settings.
settingUpdated: function(key, oldValue, newValue) {
switch (key) {
case 'videoId':
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
break;
}
},
// listen to internal dialog events.
hooks: {
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function() {
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
},
// triggered when a dialog option gets update.
// warning! this will not be triggered for settings updates.
onupdate: function(option, oldValue, newValue) {
switch (option) {
case 'resizable':
if (newValue) {
this.elements.content.removeAttribute('style');
iframe && iframe.removeAttribute('style');
} else {
this.elements.content.style.minHeight = 'inherit';
iframe && (iframe.style.minHeight = 'inherit');
}
break;
}
}
}
};
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({
frameless: true
});

<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css" />

穆罕默德·尤内斯的AlertyJS