Change part of url of background-image using jquery

Question

I have a dynamically created background-image for an embedded YouTube video. Now I want to change a part of the background-image url.

This is my HTML code:

 <div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);">

Now I want to change the "maxresdefault" in the url with "hqdefault" using jquery.

This is what I tried so far:

 $('.jet-video__overlay--custom-bg').attr("style").replace('maxresdefault','hqdefault');

@Shiz this is what I tried: $('.jet-video__overlay--custom-bg').attr("style").replace('maxresdefault','hqdefault'); — CliffVandyck
– CliffVandyck, Commented Jun 2, 2021 at 6:57

Mohamed-Yousef · Accepted Answer · 2021-06-02 21:08:12Z

2

Use .css('background-image') and replace like this

$(document).ready(() => {
 $('.jet-video__overlay--custom-bg')         // element to set the background to it */
 .css('background-image' ,                   // use .css('background-image'
     $('.jet-video__overlay--custom-bg')     // element to get the background from it
     .css('background-image')                // get the background
     .replace('maxresdefault' , 'hqdefault') //replace it
  );
});

.jet-video__overlay--custom-bg{
  width : 300px;
  height : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);"></div>

Also as @Rory suggested ^{Easy & Simple} you can use , (i , value) => return .replace....

$(document).ready(() => {
 $('.jet-video__overlay--custom-bg')
 .css('background-image', (i, v) => v.replace('maxresdefault', 'hqdefault'));
});

.jet-video__overlay--custom-bg{
  width : 300px;
  height : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);"></div>

edited Jun 2, 2021 at 21:08

answered Jun 2, 2021 at 7:12

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

6 Comments

Mohamed-Yousef Over a year ago

Glad it helped .. Have a great day @CliffVandyck :-)

Rory McCrossan Over a year ago

Just FYI this can be made more succinct with $('.el').css('background-image', (i, v) => v.replace('maxresdefault', 'hqdefault'));

Mohamed-Yousef Over a year ago

@CliffVandyck answer updated with Rory suggestion :)

Mohamed-Yousef Over a year ago

Thanks @RoryMcCrossan But it will not work without return .... :-)

Rory McCrossan Over a year ago

It will as the arrow function has an implicit return statement.

|

Collectives™ on Stack Overflow

Change part of url of background-image using jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related