Не работают иконки play/pause svg на видео не подключаются с помочью js

Question

Не могу понять почему не работают мои иконки play/pause? Не могу понять в чем причина ? Буду благодарна за любую подсказку)

let isPlayed=false;

let playButton= document.getElementById('playBtn');

function toggle () {

let claasName = playButton.className;

console.log(claasName);


if (claasName==='pause') {
    playButton.className = 'play';
    playButton.innerHTML = 'Play';
    isPlayed = true;
} else {
    playButton.className='pause';
    playButton.innerHTML='Pause';
    isPlayed='false'
}

}

.baner{

  // margin-top: 180px;
  position: absolute; 
  top: 187px; 
  left: 0px; 
  width: 100%; 
  // height: 100%; 
  overflow: hidden;
   z-index: -1;
}


#video{
  display: block; 
  width: 100%; 
  height: auto;
  background: url(../images/icon-secion/bg_photo.png);
  background-repeat: no-repeat; 
  // object-fit: contain;
  background-size: cover;

}


.play {
  position: absolute;
  top: 100px;
  left: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
 background-image: url(../images/icon/pley-icon.svg);
fill: #FFFFFF;
 background-repeat: no-repeat;
 cursor: pointer;
 background-size: cover;

}


.pause {

  position: absolute;
  top: 200px;
  left: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;

  // background-color: #2853be;
  background: url(..//images/icon/pause-icon.svg);
background-repeat: no-repeat;
 background-size: cover;

}

  <div class="col-12 col-md-12 col-lg-12 col-xl-12 baner " >
  
 
    <a id="playBtn" onclick="toggle()" class="play"> </a>
      
      <video  id="video" >
      </video>
     

</div>

Answer 1

../images/icon/pley-icon.svg точно должно быть pley?
Возможно размер иконки больше чем размер блока (width: 40px; height: 40px) и их тупо не видно.
Решение background-size: 100% (или background-size: cover или contain)
Когда подключаете svg как <img> или background-image нет никакого <svg>, только картинка и да, векторная.
Т.е. обращений как если бы это был SVG элемент - нет, так что fill, а уж тем более .play svg работать не будут.

Я бы сделал таким образом:

let container = document.querySelector('.video-container'),
    video = container.querySelector('video'),
    controls = container.querySelector('.video-controls');

video.load();
video.volume = .2;

container.addEventListener('click', function(e) {
  if(video.paused) {
    if(controls.classList.contains('video-controls--play'))
      controls.classList.remove('video-controls--play');
    controls.classList.add('video-controls--pause');
    video.play();
  } else {
    if(controls.classList.contains('video-controls--pause'))
      controls.classList.remove('video-controls--pause');
    controls.classList.add('video-controls--play');
    video.pause();
  }
});

video.addEventListener('ended', function(e) {
  video.currentTime = 0;
  if(controls.classList.contains('video-controls--pause'))
    controls.classList.remove('video-controls--pause');
  controls.classList.add('video-controls--play');
}, false);

.video-container {
  display: block;
  width: 100%;
  position: relative;
  cursor: pointer;
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.video-controls {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.65);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 35px auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.video-controls--play {
  background-image: url('//minov.pw/_remote/ruso/play.svg');
}

.video-controls--pause {
  display: none;
  background-image: url('//minov.pw/_remote/ruso/pause.svg');
}

.video-container:hover .video-controls--pause {
  display: block;
}

.video-poster {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.video-controls--pause + .video-poster {
  display: none;
}

<div class="video-container">
  <video preload="auto">
    <source src="//minov.pw/_remote/ruso/video.mp4">
  </video>
  <div class="video-controls video-controls--play"></div>
  <div class="video-poster" style="background-image: url(//i.imgur.com/2Vq3El9.png)"></div>
</div>

БЛОГ НА HUSL

Не работают иконки play/pause svg на видео не подключаются с помочью js

Ответы (1 шт):