problema al incrustar un segundo video con CSS + SCRIPT

[txemaker]

Hola amigos, gracias por vuestro tiempo

Estoy utilizando este código:

DIV:

Código PHP:

<div class="video-wrapper">
    <video src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="//s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>
</div>
 

CSS:

Código CSS:

.video-wrapper {
    position: relative;
}
 
.video-wrapper > video {
    width: 100%;
    vertical-align: middle;
}
 
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}
 
.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    background-image: linear-gradient(transparent, #000);
    transition: opacity 150ms;
}
 
.video-overlay-play-button:hover {
    opacity: 1;
}
 
.video-overlay-play-button.is-hidden {
    display: none;
}
 

SCRIPT:

Código Javascript:

var videoPlayButton,
    videoWrapper = document.getElementsByClassName('video-wrapper')[0],
    video = document.getElementsByTagName('video')[0],
    videoMethods = {
        renderVideoPlayButton: function() {
            if (videoWrapper.contains(video)) {
                this.formatVideoPlayButton()
                video.classList.add('has-media-controls-hidden')
                videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
                videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
            }
        },
 
        formatVideoPlayButton: function() {
            videoWrapper.insertAdjacentHTML('beforeend', '\
                <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                    <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
                    <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
                </svg>\
            ')
        },
 
        hideVideoPlayButton: function() {
            video.play()
            videoPlayButton.classList.add('is-hidden')
            video.classList.remove('has-media-controls-hidden')
            video.setAttribute('controls', 'controls')
        }
    }
 
videoMethods.renderVideoPlayButton()
 

Funciona perfecto, es lo que estaba buscando, con un botón de play en medio.

El problema me surge al incrustar un segundo video en el mismo php, el primero continua funcionando, pero el segundo no... Pongo el mismo código lo único que varia es la dirección del mp4 (y son correctas).

Ejemplo:

Código PHP:

<div class="col-sm-7">
 
<div class="video-wrapper">
<video src="media/video/ejemplo1.mp4" poster="media/img/ejemplo1.jpg"></video>
</div>
 
</div>
 
...
 
...
 
...
 
<div class="col-sm-7">
 
<div class="video-wrapper">
<video src="media/video/ejemplo2.mp4" poster="media/img/ejemplo2.jpg"></video>
</div>
 
</div>
 

que puede ser???? Mil gracias de nuevo