How to set a variable for JavaScript function to embed a video?

Question

I have a grid like this:

<div class="main">
    <ul id="og-grid" class="og-grid">
        <li>
            <a href="http://..." data-video="my-url"  data-largesrc="images/1.jpg" data-title="Title" data-description="Description">
                <img src="images/thumbs/1.jpg" alt="img01"/>
            </a>
        </li>
    </ul>
</div>

The data-video parameter is a url, in JavaScript I don't know how to create this function appropriately:

Preview.prototype = {
 create : function() {
    this.$title = $( '<h3></h3>' );
    this.$description = $( '<p></p>' );     
    this.$href = $( '<a href="#">Visit website</a>' );
    this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
    this.$loading = $( '<div class="og-loading"></div>' );
    this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );            
    this.$videosrc = $( '<iframe class="og-video" width="560" height="315" src="data-video" frameborder="0" allowfullscreen></iframe>' ).append( this.$loading );
    this.$closePreview = $( '<span class="og-close"></span>' );
    this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$videosrc, this.$details );
    this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
    this.$item.append( this.getEl() );
    if( support ) {
        this.setTransition();
    }
}

How could I call the data-video url of my html file inside the this.$videosrc of this JavaScript where src is declared?

Joey · Accepted Answer · 2015-02-26 16:21:07Z

1

If you are using jQuery you could get the data-video value with something like this:

var video_src  = $('[data-video]').attr('data-video');

If you are using only JavaScript give the link a ID like video_1 and

var video_src = document.getElementById("video_1").getAttribute("data-video");

You would pass that into your Preview object either when you initialize the objects properties, or by setting it later in another method/function.

    this.$videosrc = $( '<iframe class="og-video" width="560" height="315" src='+ video_src +' frameborder="0" allowfullscreen></iframe>' ).append( this.$loading );

answered Feb 26, 2015 at 16:21

Joey

1,2671 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve K · Accepted Answer · 2015-02-26 16:22:27Z

1

You use the jquery .data() method:

this.$videosrc = $( '<iframe class="og-video" width="560" height="315" src="' + 
$(this.getEl()).data('video') + 
'" frameborder="0" allowfullscreen></iframe>')
.append( this.$loading );

If I'm understanding your method correctly, there's a this.getEl() method that returns a reference to the element where the data-video parameter is, and the code above should work if that's true.

answered Feb 26, 2015 at 16:22

Steve K

4,9112 gold badges34 silver badges41 bronze badges

2 Comments

NineCattoRules Over a year ago

Thanks, I tried but it gives me a null...on my html I wrote on data-video="https://www.youtube.com/embed/an_id" but the output gives me a totally different src="http://mywebsite/null"

Steve K Over a year ago

this.getEl() doesn't do what I hoped it did, then... you need to get the reference to the element with your data-video parameter somehow before you can call $(el).data('video') to get the value.

Collectives™ on Stack Overflow

How to set a variable for JavaScript function to embed a video?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related