jQuery iframe not able to set youtube url

Question

I am trying to do

Here is the code inside my HTML

<iframe class="embed-responsive-item"  id="placeYoutubeVideo"
        style="display:none" src="#" style="display:none" allowfullscreen></iframe>

In jQuery I am trying to change the src of the video

var neww = 'https://youtu.be/NOubzHCUt48';
        $('#placeYoutubeVideo').prop('src', neww)

But it is throwing the following error:

Refused to display 'https://www.youtube.com/watch?v=NOubzHCUt48&feature=youtu.be' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

How can I fix this?

If not possible is it possible to generate iframe with youtube url on click function?

help please.

This Possible duplicate: [How to set 'X-Frame-Options' on iframe?](http://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe) might help you understand your problem... — FirstOne, Dec 28 '15 at 11:56

Dmitriy Klimov · Accepted Answer · 2015-12-28T13:45:32.183

1

Try this

<iframe class="embed-responsive-item" id="placeYoutubeVideo" src="#" allowfullscreen></iframe> 
<script> 
$(document).ready(function () { 
var neww = 'http://www.youtube.com/embed/NOubzHCUt48'; $('#placeYoutubeVideo').attr('src', neww); }); 
</script>

https://jsfiddle.net/vyt7gxwz/

HTTP -> HTTPS = ERROR (X-Frame-Options' to 'SAMEORIGIN)

HTTP -> HTTP = OK

HTTPS -> HTTPS = OK

HTTPS -> HTTP = ERROR (X-Frame-Options' to 'SAMEORIGIN)

edited Dec 28 '15 at 13:45

answered Dec 28 '15 at 12:21

Dmitriy Klimov

61
6

Nothing is happening :( – Biz Dev B Dec 28 '15 at 12:30
http protocol, https security. – Dmitriy Klimov Dec 28 '15 at 12:37
1

` ` its work... – Dmitriy Klimov Dec 28 '15 at 12:53
@DmitriyKlimov its working you should post this as answer – Anto S Dec 28 '15 at 13:00
@DmitriyKlimov Its working.. wowwww Can you post this as answer, i have some clarification in your answer – Biz Dev B Dec 28 '15 at 13:02
is it possible to generate the iframe and then replace it with span inside the html ? – Biz Dev B Dec 28 '15 at 13:14
I mean i want to have this span – Biz Dev B Dec 28 '15 at 13:27
And then inside that i want to put the iframe content inside that.. is that possible ? – Biz Dev B Dec 28 '15 at 13:27
Of course ! `$("#putiframecontent").html('');` And then we start our code. Replace to `$('#putiframecontent > iframe')` – Dmitriy Klimov Dec 28 '15 at 13:30
let me have a try ;) – Biz Dev B Dec 28 '15 at 13:41

Anto S · Answer 2 · 2015-12-28T12:04:54.517

0

Instead you can replaceWith

 var neww = 'https://youtu.be/NOubzHCUt48';
 var newContent = '<iframe class="embed-responsive-item"  id="placeYoutubeVideo" style="display:none" src="'+neww +'" style="display:none"  allowfullscreen></iframe>'

// Replace 'neww ' with your new URL

     $('#placeYoutubeVideo').replaceWith(newContent );

edited Dec 28 '15 at 12:04

answered Dec 28 '15 at 11:59

Anto S

2,448
6
32
50

Thanks, but am getting this error Uncaught TypeError: $(...).replace is not a function – Biz Dev B Dec 28 '15 at 12:04
Same error now 'Refused to display 'https://www.youtube.com/watch?v=NOubzHCUt48&feature=youtu.be' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.' – Biz Dev B Dec 28 '15 at 12:07

Abdulla Nilam · Answer 3 · 2015-12-28T12:18:20.033

0

Try this

var neww = 'https://youtu.be/NOubzHCUt48';
iframe.setAttribute("src", neww);

Syntax

element.setAttribute(attributename,attributevalue)

Parameter Values

attributename   |  String   |  Required. The name of the attribute you want to add
attributevalue  |  String   |  Required. The value of the attribute you want to add

HTML DOM setAttribute() Method

EDIT 01

If you want add that to only one element

document.getElementsByID("placeYoutubeVideo").setAttribute("src", neww);

edited Dec 28 '15 at 12:18

answered Dec 28 '15 at 12:08

Abdulla Nilam

36,589
17
64
85

should i replace src with placeYoutubeVideo ? – Biz Dev B Dec 28 '15 at 12:13
or how can i tell that it should be displayed in the div placeYoutubeVideo – Biz Dev B Dec 28 '15 at 12:14
remove src and in `` – Abdulla Nilam Dec 28 '15 at 12:14
is there only one video ?? or – Abdulla Nilam Dec 28 '15 at 12:14
Only one video was there – Biz Dev B Dec 28 '15 at 12:16
Check **Edit 01** as well – Abdulla Nilam Dec 28 '15 at 12:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99120/discussion-between-biz-dev-b-and-abdulla). – Biz Dev B Dec 28 '15 at 12:19

score 0 · Answer 4 · answered Jun 11 '18 at 20:27

0

X-Frame-Options: Sameorigin is used by YouTube to prevent clickjacking. You will need to embed the actual playlist.

Embed videos & playlists

answered Jun 11 '18 at 20:27

Whamo12

76
4

jQuery iframe not able to set youtube url

4 Answers4