problema al incrustar un segundo video con CSS + SCRIPT

[txemaker]

Iniciado por mpozo

El método getElementsByClassName retorna un classList y para acceder a cada elemento se usa un índice. Cómo puedes ver, en tu código, el índice es 0. Esto quiere decir que cualquier cosa que se haga sólo afectara al primer elemento.

La solución es usar el método querySelectorAll(), por que getElementsByClassName() está obsoleto, y recorrer el la colección de elementos con un ciclo (for o forEach)

hola mpozo gracias por responder... disculpa, es que estoy limitado en javascript.... he probado con esto:

Código Javascript:

var videoPlayButton,
    videoWrapper = document.querySelectorAll()('video-wrapper'),
    video = document.querySelectorAll()('video'),
    videoMethods = {
        renderVideoPlayButton: function() {
            if (videoWrapper.contains(video)) {
                this.formatVideoPlayButton()
                video.classList.add('has-media-controls-hidden')
                videoPlayButton = document.querySelectorAll()('video-overlay-play-button')
                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()
 

pero no funciona en ninguno... por favor, podrias ponerme el script completo??? mil gracias de verdad...

te pongo de nuevo el script original

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()