0

I have PHP while loop which showing this value:

echo "<a href='$video_url' data-vid='$video_id' class='$active'>$video_title</a>";

And I have a HTML iframe:

<iframe height="380" id="yframe" data-video-id="" width="800" src="https://www.youtube.com/embed/xxHmoLvjpLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="margin-top: 30px; float: right; margin-right: 10px; "></iframe>

How its works:

When I click on the each alink it's just getting the href value and set it to iframe src value.

Well, Now you see that I have data-vid value in a link.

I want, On first page load the first data-vid value should be set to iframe data-video-id value.

and then when I click on any a link then corresponding data-vid value should set to iframe data-video-id value.

But somehow it's not working.

here is my JS code:

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

  var current_vid = $('.vertical-menu a').data("vid");
    $('#yframe').data('video-id', current_vid);

    $(".vertical-menu a").click(function(e) {
        e.preventDefault();
        $("#yframe").attr("src", $(this).attr("href"));
        $('#yframe').data('video-id', $(this).data("vid"));
        $('.vertical-menu a').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
    })
});

$(document).ready(function(){
    $("#next-btn").click(function(){
        $(".vertical-menu a.active").next().trigger("click");
    });
});
</script>
Improve this question

3 Answers 3

Reset to default
0

OH, I found the problem I should set the value using attr not data. But why?

Here is the code: 

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

  var current_vid = $('.vertical-menu a').data("vid");
    $('#yframe').attr('data-video-id', current_vid);

    $(".vertical-menu a").click(function(e) {
      e.preventDefault();
      $("#yframe").attr("src", $(this).attr("href"));
      $('#yframe').attr('data-video-id', $(this).data("vid"));
      $('.vertical-menu a').removeClass('active');

      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
    })
});

$(document).ready(function(){
    $("#next-btn").click(function(){
        $(".vertical-menu a.active").next().trigger("click");
    });
});
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Firstly, you are using jquery to achieve this. Similar can be done using plain old javascript as well.

Why should set with attr not with data is because attr in jquery is used to update/set attribute values of DOM elements. Which is a function which takes two parameters (attribute name and value).

Here's how you achieve the same using javascript

var yFrame = document.getElementById("yframe");
yframe.getAttribute("data-video-id"); // Returns the value of the attr
yframe.setAttribute("data-video-id","your data value") // Sets the value of attr
Improve this answer

Comments

0

.data() will store arbitrary data associated with the specified element and/or return the value that was set. .attr() will get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

have a look at this article

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.