1

I am creating a webpage where I have to load iframes inside a div.

<div class="sketchfab">
    <iframe class="myframe" src=""></iframe>
</div>

And below it I have links that should provide the source for iframe.

<div class="container">
    <a href=#>A</a>
    <a href=#>B</a>
    <a href=#>C</a>
    <a href=#>D</a>
    And so on till Z
</div>

How can I do it?
The iframes display 3D animations of the sign gestures. So basically when I press hyperlink of A, the gesture of A appears... and so on..

Tejas
  • 224
  • 1
  • 10
  • Possible duplicate of [Changing iframe src with Javascript](https://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript) – Kramb Jun 29 '17 at 18:43
  • Have you tried using `name` for the iframe and `target` on the links? – lumio Jun 29 '17 at 19:01

1 Answers1

2

HTML


<div class="">
    <a href="#" data-url="hMxGhHNOkCU">A</a>
    <a href="#" data-url="BWXggB-T1jQ">B</a>
    <a href="#" data-url="gqOEoUR5RHg">C</a>
    <a href="#" data-url="5GcQtLDGXy8">D</a>
    And so on till Z
</div>

And Javascript:

$(function() {
    $('a').click(function() {
    var _this = $(this),
            iframe = $('iframe');

    iframe.attr('src','https://www.youtube.com/embed/' + _this.attr('data-url'));
  });
});

You can check this Fiddle.

moreirapontocom
  • 458
  • 3
  • 10