Change iframe video id on click
I have a number of links with different youtube videos I would like to show in a modal. When the user clicks the link, the video id should update from the iframe api and load the modal.
http://jsfiddle.net/k7FC2/7308/
html
<a id='video-player-1' href="#my_modal" data-toggle="modal" data-book-id="VDB65S6rCC0" >Open Modal 1</a>
<a id='video-player-2' href="#my_modal" data-toggle="modal" data-book-id="1roy4o4tqQM" >Open Modal 2</a>
<a id='video-player-3' href="#my_modal" data-toggle="modal" data-book-id="Q3w7Fz6KFa8" >Open Modal 3</a>
Javascript
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
However, my on click events to not seem to get called. Nor does my video id update.
jquery youtube-iframe-api
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
add a comment |
I have a number of links with different youtube videos I would like to show in a modal. When the user clicks the link, the video id should update from the iframe api and load the modal.
http://jsfiddle.net/k7FC2/7308/
html
<a id='video-player-1' href="#my_modal" data-toggle="modal" data-book-id="VDB65S6rCC0" >Open Modal 1</a>
<a id='video-player-2' href="#my_modal" data-toggle="modal" data-book-id="1roy4o4tqQM" >Open Modal 2</a>
<a id='video-player-3' href="#my_modal" data-toggle="modal" data-book-id="Q3w7Fz6KFa8" >Open Modal 3</a>
Javascript
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
However, my on click events to not seem to get called. Nor does my video id update.
jquery youtube-iframe-api
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
add a comment |
I have a number of links with different youtube videos I would like to show in a modal. When the user clicks the link, the video id should update from the iframe api and load the modal.
http://jsfiddle.net/k7FC2/7308/
html
<a id='video-player-1' href="#my_modal" data-toggle="modal" data-book-id="VDB65S6rCC0" >Open Modal 1</a>
<a id='video-player-2' href="#my_modal" data-toggle="modal" data-book-id="1roy4o4tqQM" >Open Modal 2</a>
<a id='video-player-3' href="#my_modal" data-toggle="modal" data-book-id="Q3w7Fz6KFa8" >Open Modal 3</a>
Javascript
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
However, my on click events to not seem to get called. Nor does my video id update.
jquery youtube-iframe-api
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
I have a number of links with different youtube videos I would like to show in a modal. When the user clicks the link, the video id should update from the iframe api and load the modal.
http://jsfiddle.net/k7FC2/7308/
html
<a id='video-player-1' href="#my_modal" data-toggle="modal" data-book-id="VDB65S6rCC0" >Open Modal 1</a>
<a id='video-player-2' href="#my_modal" data-toggle="modal" data-book-id="1roy4o4tqQM" >Open Modal 2</a>
<a id='video-player-3' href="#my_modal" data-toggle="modal" data-book-id="Q3w7Fz6KFa8" >Open Modal 3</a>
Javascript
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
However, my on click events to not seem to get called. Nor does my video id update.
jquery youtube-iframe-api
jquery youtube-iframe-api
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
edited Nov 13 '18 at 22:42
user2012677
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
asked Nov 13 '18 at 22:12
user2012677user2012677
1,39641436
1,39641436
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your <script /> tag is above the elements on the page. When the event handlers are created the elements do not exist on the page. You can fix this by wrapping them in jQuery's document ready handler (which is an alais for the DOMContentLoaded event:
Basic Syntax:
$(document).ready(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Short Hand Syntax:
$(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Alternative:
As another alternative, you can add these handlers in a new <script /> tag located right before the closing </body> tag. With this method, you can eliminate the call to $(document).ready and use your existing code as the elements have already been populated in the DOM by the time the handlers are created.
Updated Working Fiddle Example: jsfiddle.net
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
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%2f53290294%2fchange-iframe-video-id-on-click%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
Your <script /> tag is above the elements on the page. When the event handlers are created the elements do not exist on the page. You can fix this by wrapping them in jQuery's document ready handler (which is an alais for the DOMContentLoaded event:
Basic Syntax:
$(document).ready(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Short Hand Syntax:
$(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Alternative:
As another alternative, you can add these handlers in a new <script /> tag located right before the closing </body> tag. With this method, you can eliminate the call to $(document).ready and use your existing code as the elements have already been populated in the DOM by the time the handlers are created.
Updated Working Fiddle Example: jsfiddle.net
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
add a comment |
Your <script /> tag is above the elements on the page. When the event handlers are created the elements do not exist on the page. You can fix this by wrapping them in jQuery's document ready handler (which is an alais for the DOMContentLoaded event:
Basic Syntax:
$(document).ready(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Short Hand Syntax:
$(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Alternative:
As another alternative, you can add these handlers in a new <script /> tag located right before the closing </body> tag. With this method, you can eliminate the call to $(document).ready and use your existing code as the elements have already been populated in the DOM by the time the handlers are created.
Updated Working Fiddle Example: jsfiddle.net
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
add a comment |
Your <script /> tag is above the elements on the page. When the event handlers are created the elements do not exist on the page. You can fix this by wrapping them in jQuery's document ready handler (which is an alais for the DOMContentLoaded event:
Basic Syntax:
$(document).ready(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Short Hand Syntax:
$(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Alternative:
As another alternative, you can add these handlers in a new <script /> tag located right before the closing </body> tag. With this method, you can eliminate the call to $(document).ready and use your existing code as the elements have already been populated in the DOM by the time the handlers are created.
Updated Working Fiddle Example: jsfiddle.net
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
Your <script /> tag is above the elements on the page. When the event handlers are created the elements do not exist on the page. You can fix this by wrapping them in jQuery's document ready handler (which is an alais for the DOMContentLoaded event:
Basic Syntax:
$(document).ready(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Short Hand Syntax:
$(function () {
$('#video-player-1').click(function(e) {
var bookId = $(e.relatedTarget).data('book-id');
var x = new String(bookId);
player.loadVideoById(x);
alert("HEELO");
});
$( "#video-player-2" ).click(function() {
alert( "Handler for .click() called." );
});
});
Alternative:
As another alternative, you can add these handlers in a new <script /> tag located right before the closing </body> tag. With this method, you can eliminate the call to $(document).ready and use your existing code as the elements have already been populated in the DOM by the time the handlers are created.
Updated Working Fiddle Example: jsfiddle.net
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
edited Nov 13 '18 at 22:24
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
answered Nov 13 '18 at 22:19
War10ckWar10ck
10.2k62945
10.2k62945
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
add a comment |
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
It works, thank you, any recommendation for moving all the JS code to a separate file?
– user2012677
Nov 13 '18 at 22:29
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%2f53290294%2fchange-iframe-video-id-on-click%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
