CODEWITHSUNDEEP
javascriptjqueryhtml
whaaaaaaz
whaaaaaaz

Reputation: 39

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:

var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);

iframe gets new src value, but no video is displayed. Any ideas?

extended explanation:

There is a popup div with embeded youtube video

<div class="youtubepopup">
    <div class="closeyoutube">X</div>
    <div class="actualyoutube">
        <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

There is a certain td which contains a new src url. There is no other place or way to get this url except from this td. 

<td class="videourl">//youtube.com/whatevervideo</td>

And there is a script that should add src on open popup and remove on closing.

var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
  $(".actualyoutube iframe").attr('src', videourl);
  $(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
  $(".youtubepopup").fadeOut('slow');
  $(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
  $(".youtubepopup").fadeOut('slow');
});

p.s. now that i laid it out, user3385530 is probably right

Upvotes: 2

Views: 18725

Answers (3)

Ansyori
Ansyori

Reputation: 2835

<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />

<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>

</div>

<script>
    jQuery(document).ready(function(){


        jQuery('.video-list img').on('click',function () {

            var videoId = jQuery(this).attr('video-id');
            var videoUrl = 'https://www.youtube.com/embed/'+videoId;
            jQuery('#main-play').attr('src',videoUrl);

        });
    });
</script>

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272106

You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:

http://www.youtube.com/embed/VIDEO_ID_GOES_HERE

Just place an iframe such as this inside your web page:

<div class="actualyoutube">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>

Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:

var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
    .attr("src", "http://www.youtube.com/embed/" + videoid)
    .appendTo(".actualyoutube");

* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.

Upvotes: 6

user3385530
user3385530

Reputation: 67

This will not work because page is parsed and only on refresh with new ulr will happen.

You need to use ajax to pre-load the page with new url and then to set iframe.

Upvotes: 0

Related Questions