Search code examples
javascriptjquerydynamicdynamic-data

Dynamically Add Parameters to an Embedded URL

I use the program jAlbum with skin Lightflow to build a gallery. I am embedding YouTube videos inside the gallery. The program produces the following HTML (for an individual embedded video) look like this: 

<div class="item">
 <img class="content hidden" src="thumbs/video.jpg" alt="" />
    <div class="ref hidden">item27</div>
    <div class="caption"><h3></h3></div>
    <div class="comment hidden"></div>
    <div class="author hidden"></div>
    <div class="params hidden">lightwindow_width=640,lightwindow_height=360</div>
    <div class="info hidden"></div>
    <div class="embed hidden"><iframe width="640" height="360" 
src="http://www.youtube.com/embed/E-lTPK5sQAA?fs=1&feature=oembed" 
frameborder="0" allowfullscreen></iframe></div>
    <div class="thumbWidth hidden">350</div>
    <div class="thumbHeight hidden">231</div>
    <a id="item27" class="lightwindow hidden" title="" rel="gal[cat]" 
href="http://www.youtube.com/watch?v=E-lTPK5sQAA" ></a>
    </div>

I would like to add some parameters to the youtube embed code. The parameters are rel=0&modestbranding=1&iv_load_policy=3

I cannot add these inside the gallery (or at least I am ignorant of how) so I need to add these dynamically to the end of the YouTube src code after the page is loaded in the browser.

How do I go about doing this? Please provide examples as Javascript can throw me for a loop.

EDIT 1

I have attempted this code: 

var $j = jQuery.noConflict();
$j('iframe').attr('src', $j(this).attr('src') + 
  '&rel=0&modestbranding=1&iv_load_policy=3'));

and when I syntax errors are thrown in dreamweaver and Firebug says I am missing ; before statement What am I missing in the code?

EDIT 2

When I try the above code the src is changed to undefined&rel=0&modestbranding=1&iv_load_policy=3

Solution

  • I was able to get this figured out after I saw an answer to this question. Here is the solution: 

    var $j = jQuery.noConflict();
$j('iframe').prop('src', function(i, oldSrc) {
return oldSrc + (oldSrc.indexOf('?') ? 
'&rel=0&modestbranding=1&iv_load_policy=3' : 
'?rel=0&modestbranding=1&iv_load_policy=3');
})

    Note: You must be using jQuery 1.6+ for prop to work.