How to embed Youtube video in Javascript alert popup?
I'm trying to work out how best to embed a Youtube video into a Javascript function so it will appear (and be playable) in a popup alert box.
This is the code I'm using:
<script>
function myFunction12() {
alert("");
}
</script>And the video I'm trying to insert is here: https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2Cwn
I've been trying to use the embed code provided by Youtube in the alert quotations, but it doesn't recognize HTML there and I'm not sure how to proceed. The video needs to appear and play in a popup box.
Thanks much in advance for any tips! I'm pretty new at writing Javascript and may ask follow up questions.
EDIT: I'm now working on creating a modal box that pops up with the video in it when the user clicks "1" on the imagemap. I think the components are correct, but I can't quite get the two to connect. Any suggestions would be greatly appreciated!
My code is here: w3schools.com/code/tryit.asp?filename=FXKTC5KYZEEL
javascript html youtube
asked Nov 25 '18 at 16:11
ZoeZoe
42
|
show 4 more comments
I'm trying to work out how best to embed a Youtube video into a Javascript function so it will appear (and be playable) in a popup alert box.
This is the code I'm using:
<script>
function myFunction12() {
alert("");
}
</script>And the video I'm trying to insert is here: https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2Cwn
I've been trying to use the embed code provided by Youtube in the alert quotations, but it doesn't recognize HTML there and I'm not sure how to proceed. The video needs to appear and play in a popup box.
Thanks much in advance for any tips! I'm pretty new at writing Javascript and may ask follow up questions.
EDIT: I'm now working on creating a modal box that pops up with the video in it when the user clicks "1" on the imagemap. I think the components are correct, but I can't quite get the two to connect. Any suggestions would be greatly appreciated!
My code is here: w3schools.com/code/tryit.asp?filename=FXKTC5KYZEEL
javascript html youtube
asked Nov 25 '18 at 16:11
ZoeZoe
42
That's not possible. Analert()only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-inalert()function.
– Ivar
Nov 25 '18 at 16:16
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52
|
show 4 more comments
I'm trying to work out how best to embed a Youtube video into a Javascript function so it will appear (and be playable) in a popup alert box.
This is the code I'm using:
<script>
function myFunction12() {
alert("");
}
</script>And the video I'm trying to insert is here: https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2Cwn
I've been trying to use the embed code provided by Youtube in the alert quotations, but it doesn't recognize HTML there and I'm not sure how to proceed. The video needs to appear and play in a popup box.
Thanks much in advance for any tips! I'm pretty new at writing Javascript and may ask follow up questions.
EDIT: I'm now working on creating a modal box that pops up with the video in it when the user clicks "1" on the imagemap. I think the components are correct, but I can't quite get the two to connect. Any suggestions would be greatly appreciated!
My code is here: w3schools.com/code/tryit.asp?filename=FXKTC5KYZEEL
javascript html youtube
asked Nov 25 '18 at 16:11
ZoeZoe
42
I'm trying to work out how best to embed a Youtube video into a Javascript function so it will appear (and be playable) in a popup alert box.
This is the code I'm using:
<script>
function myFunction12() {
alert("");
}
</script>And the video I'm trying to insert is here: https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2Cwn
I've been trying to use the embed code provided by Youtube in the alert quotations, but it doesn't recognize HTML there and I'm not sure how to proceed. The video needs to appear and play in a popup box.
Thanks much in advance for any tips! I'm pretty new at writing Javascript and may ask follow up questions.
EDIT: I'm now working on creating a modal box that pops up with the video in it when the user clicks "1" on the imagemap. I think the components are correct, but I can't quite get the two to connect. Any suggestions would be greatly appreciated!
My code is here: w3schools.com/code/tryit.asp?filename=FXKTC5KYZEEL
<script>
function myFunction12() {
alert("");
}
</script><script>
function myFunction12() {
alert("");
}
</script>javascript html youtube
javascript html youtube
asked Nov 25 '18 at 16:11
ZoeZoe
42
asked Nov 25 '18 at 16:11
ZoeZoe
42
edited Nov 25 '18 at 17:53
Zoe
asked Nov 25 '18 at 16:11
ZoeZoe
42
asked Nov 25 '18 at 16:11
ZoeZoe
42
asked Nov 25 '18 at 16:11
ZoeZoe
42
42
That's not possible. Analert()only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-inalert()function.
– Ivar
Nov 25 '18 at 16:16
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52
|
show 4 more comments
That's not possible. Analert()only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-inalert()function.
– Ivar
Nov 25 '18 at 16:16
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52
That's not possible. An
alert() only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-in alert() function.– Ivar
Nov 25 '18 at 16:16
That's not possible. An
alert() only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-in alert() function.– Ivar
Nov 25 '18 at 16:16
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52
|
show 4 more comments
1 Answer
1
active
oldest
votes
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the<area>tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this:function myBtn(){ modal.style.display="block" }but you can name the function whatever you want as long as it matches the onclick attribute.
– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove thehrefattribute from the<area>tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F
– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53469360%2fhow-to-embed-youtube-video-in-javascript-alert-popup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the<area>tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this:function myBtn(){ modal.style.display="block" }but you can name the function whatever you want as long as it matches the onclick attribute.
– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove thehrefattribute from the<area>tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F
– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
add a comment |
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the<area>tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this:function myBtn(){ modal.style.display="block" }but you can name the function whatever you want as long as it matches the onclick attribute.
– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove thehrefattribute from the<area>tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F
– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
add a comment |
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
edited Feb 9 at 20:41
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
answered Nov 25 '18 at 16:17
AlpacaFurAlpacaFur
163211
163211
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the<area>tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this:function myBtn(){ modal.style.display="block" }but you can name the function whatever you want as long as it matches the onclick attribute.
– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove thehrefattribute from the<area>tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F
– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
add a comment |
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the<area>tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this:function myBtn(){ modal.style.display="block" }but you can name the function whatever you want as long as it matches the onclick attribute.
– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove thehrefattribute from the<area>tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F
– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
Thanks very much for this information! Do you know how I might accomplish this with my current code? I've updated the post with a link.
– Zoe
Nov 25 '18 at 17:52
@Zoe just add a function that matches the onclick attribute of the
<area> tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this: function myBtn(){ modal.style.display="block" } but you can name the function whatever you want as long as it matches the onclick attribute.– AlpacaFur
Nov 25 '18 at 20:21
@Zoe just add a function that matches the onclick attribute of the
<area> tag. Right now the onclick attribute calls a function called "myBtn()" but that function doesn't yet exist. It should probably look something like this: function myBtn(){ modal.style.display="block" } but you can name the function whatever you want as long as it matches the onclick attribute.– AlpacaFur
Nov 25 '18 at 20:21
Oh, also remove the
href attribute from the <area> tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F– AlpacaFur
Nov 25 '18 at 20:31
Oh, also remove the
href attribute from the <area> tag as it causes the page to redirect to an empty page. Here are the changes implemented in your code: w3schools.com/code/tryit.asp?filename=FXKYZ2IAHM3F– AlpacaFur
Nov 25 '18 at 20:31
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
Thanks so much for this! I've removed the "href" so that issue is solved. Do you know how I would use the modal without the presence of the myBtn? Everytime I try to delete it, the modal opens but won't close. Also, how would one create two or more different modals on the same page?
– Zoe
Nov 28 '18 at 19:09
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53469360%2fhow-to-embed-youtube-video-in-javascript-alert-popup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
That's not possible. An
alert()only accepts one string parameter that will be displayed in the alert. If you want more freedom, you'll have to create some custom modal instead of the build-inalert()function.– Ivar
Nov 25 '18 at 16:16
Not possible. Try googling "how to create pop up in javascript"
– Dinesh undefined
Nov 25 '18 at 16:18
Okay, thanks for the clarification. Can you think of something else I could make that would simulate the same? Also, it it possible to embed links in Java popups? That could be a potential workaround
– Zoe
Nov 25 '18 at 16:21
to make a video popup just replace the contents with your video w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
– Faizal Hussain
Nov 25 '18 at 16:22
This is great Faizal, thank you. Do you know how I might get the modal to pop up without the use of a button? I'm making an imagemap, and I would like to assign the modal with the video in it to one of the clickable rectangles.
– Zoe
Nov 25 '18 at 16:52