How can I change my iframe video background image?

Question

I am using iframe to show a video on my site and want to change the styling of the play button.

Here my code:

.ytp-cued-thumbnail-overlay-image {
 background: url(https://www.w3schools.com/css/trolltunga.jpg);
}

button.ytp-large-play-button.ytp-button {
    z-index: -1 !important;
}

<iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

How can I put my background-image and change the button styling?

Try this thread.., [Custom play button youtube video](https://stackoverflow.com/questions/32627887/youtube-custom-play-icon) — vijay, Jun 21 '17 at 11:03

score 1 · Accepted Answer · answered Jun 21 '17 at 11:09

You can try the following code with javascript.

#background-video {
        background-image: url('http://placehold.it/580x460');
        background-repeat: no-repeat;
        padding: 50px;
}

#vidwrap {
        background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow:hidden;
        background-repeat: no-repeat;
        width:480px;
        height:360px;
        cursor:pointer;
}

    <div id="background-video">
        <div onclick="play();" id="vidwrap"></div>
    </div>
    
    
    <script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>

Thank it works. I still wanted to be able to style the button, but your code works and I vote for it] — Sidney Sousa, Jun 21 '17 at 12:11

How can I change my iframe video background image?

1 Answers1

Linked