Use HTML data attribute in jQuery appended div

Question

I'm creating a simple portfolio layout for a client of mine and I want to be able to dynamically embed a Vimeo video into a div that is appended via jQuery using HTML data attributes

Below is my HTML markup with the Vimeo video ID stored as data-video

<div class="grid-block" data-video="32001208">
    <img src="http://placekitten.com/225/125"/>
</div>

And this is my current jQuery snippet that appends a div with a class of video once the grid-block element is clicked.

$( ".grid-block" ).click(function() {
    $( this ).append( "<div class='video'>" );
});

What I want to be able to do is embed an iframe in this video div that shows a Vimeo video, with the data-video attribute above being the video ID.

This would be the Vimeo embed code with the video ID replaced with XXXXXXX;

<iframe src="//player.vimeo.com/video/XXXXXXXX?title=0&amp;byline=0&amp;portrait=0&amp;color=bc2026" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

I hope that was clear and thanks in advance for any help.

Answer 1

why not use the data api to access the value of the data-* attribute

$(".grid-block").click(function () {
    $(this).append('<div class="video"><iframe src="//player.vimeo.com/video/' + $(this).data('video') + '?title=0&amp;byline=0&amp;portrait=0&amp;color=bc2026" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>');
});