Change part of "src" attribute of iframe with jQuery

Question

I actually need to disable autoplay on a vimeo iframe embed on a drupal 6 website.

I can't change this settings in the embedmedia module, so I need to use jQuery to do this.

This is the original "src" vimeo content:

<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&amp;show_title=1&amp;show_byline=0&amp;show_portrait=1&amp;autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>

I override the height and width attributes with jQuery already.

So I try to do the same for "src" but my code replace the "src" content:

$("#media-vimeo-1 iframe").attr('src','autoplay=0');

How can I preserve the other part of src content and only change the autoplay setting ?

castletheperson · Accepted Answer · 2018-03-01 15:33:11Z

2

The second parameter to attr can be a function that processes the old value to get a new value:

$("#media-vimeo-1 iframe").attr('src', function (index, oldSrc) {
    return oldSrc.replace('autoplay=1', 'autoplay=0');
});

answered Mar 1, 2018 at 15:33

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

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

Comments

Mario Rawady · Accepted Answer · 2018-03-01 16:04:06Z

You must get the old src, replace the desired parameters, and then change the src

$(document).ready(function() {
  var oldSrc = $("#media-vimeo-1 iframe").attr("src"); //Get the src of the iframe
  var newSrc = oldSrc.replace("autoplay=1", "autoplay=0"); //Replace "autoplay=1" by "autoplay=0"
  
  $("#media-vimeo-1 iframe").attr("src", newSrc); //Change the src attr to the new value
  
  console.log("Old Src: " + oldSrc);
  console.log("New Src: " + newSrc);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="media-vimeo-1">
  <iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&amp;show_title=1&amp;show_byline=0&amp;show_portrait=1&amp;autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
</div>

Kieran Devlin · Accepted Answer · 2018-03-01 15:36:35Z

0

In your example youre just setting the src attribute to be autoplay=0 What you realistically want to do is grab the current value, replace a value within the string and reassign the value.

Example (There are better ways to do this):

var link = $("iframe").attr('src');
link = link.replace('autoplay=1', 'autoplay=0');
$("iframe").attr('src', link);

answered Mar 1, 2018 at 15:36

Kieran Devlin

1,4531 gold badge14 silver badges29 bronze badges

Comments

user3483203 · Accepted Answer · 2018-03-01 16:04:33Z

0

Hope this code help you.

var src = $('iframe').attr('src'); <br>
var searchParams = new URLSearchParams(src); <br>
searchParams.set('autoplay','0'); <br>
var newParams = searchParams.toString(); <br>
$('iframe').attr('src', decodeURIComponent(newParams)); <br>

Source code:
https://github.com/sendeveloper/stackoverflow/tree/master/javascript_src_autoplay

edited Mar 1, 2018 at 16:04

user3483203

51.3k10 gold badges72 silver badges104 bronze badges

answered Mar 1, 2018 at 15:56

Michael Lam

113 bronze badges

Collectives™ on Stack Overflow

Change part of "src" attribute of iframe with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related