红色按钮在此处起作用：https://jsfiddle.net/bpncm9dk/
Image

<button class="playInitial cover" type="button" data-container="play1" data-id="EK3h0IADYrQ">
  </button>

更改按钮样式后，现在没有视频显示。https://jsfiddle.net/2sL6p0ex/
我认为CSS需要以不同的方式重新排列。
这怎么写不一样呢？
Image

<button class="playInitial cover spinner" type="button" data-container="play1" data-id="EK3h0IADYrQ">
    <span class="color-circle"></span>
  </button>

CSS配置在这里将如何更改？
如果这是问题所在的话。
我所做的只是改变了按钮的样式。

.spinner {}
.spinner::before {}
.color-circle {}
.color-circle:before {}
.spinner:hover .color-circle {}

我试着改变CSS类，以不同的顺序排列它们。
代码是如何工作的，点击一个按钮，一个视频出现在屏幕上。
http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element 规定<button>必须只包含短语内容。短语内容被定义为包括<span>但不包括<div>
问题是什么？如何解决？

const myVideo = document.querySelector('.video');

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    myVideo.dataset.id = event.target.dataset.id;
  });
});