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

回答1:

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.

回答2:

To append options you can do this:

$('iframe').each(function () {
    var src = $(this).attr('src');
    $(this).attr('src', src + '&showinfo=1&autohide=1');
});

To replace options in bulk in a piece of html you can do this assuming that all urls to be replaced have this format http://www.youtube.com/embed/id?params:

var addYTparams = function(html, params){
    return html.replace(/(youtube.com.+\?).+/, '$1'+params);
};
addYTparams($el.html(), 'rel=0&modestbranding=1&iv_load_policy=3');

来源：https://stackoverflow.com/questions/9423973/dynamically-add-parameters-to-an-embedded-url

标签

javascript

jquery

dynamic

dynamic-data