• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Change background image of play/pause button with jquery

zerojjc

New Coder
I used the Jfiddle below to setup a button that would play/pause a background video. However, I need to swap the background image so that when its playing a "pause image" is there, when paused a "play image" is there.

https://jsfiddle.net/svArtist/9ewogtwL/

Script:
$('.video').parent().click(function () {
        if($(this).children(".video").get(0).paused){
            $(this).children(".video").get(0).play();
            $(this).children(".playpause").fadeOut();
        }else{
           $(this).children(".video").get(0).pause();
            $(this).children(".playpause").fadeIn();
        }
    });

CSS:
.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper{
    display:table;
    width:auto;
    position:relative;
    width:50%;
}
.playpause {
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat:no-repeat;
    width:50%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="wrapper">
    <video class="video">
        <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>
 

Malcolm

Administrator
Administrator
Staff Team
Hi @zerojjc,

Questions like these defiantly make me want to get back into JavaScript! From what I understand, you want to add a pause/play image to the background depending on the video state, is that correct?
 

zerojjc

New Coder

zerojjc

New Coder
I've tried doing this to swap the class, but it didn't work:
JS:
$('.video').parent().click(function () {
  if($(this).children(".video").get(0).paused){
    $(this).children(".video").get(0).play();
    $(this).children(".playpause").toggleClass('.playpause .playpause2');
  }else{
    $(this).children(".video").get(0).pause();
    $(this).children(".playpause2").toggleClass('.playpause2 .playpause');
  }
});
 
Top