单击可滚动div内的视频按钮，将其向右移动

Question

我创建了一个小提琴来演示该问题。 LINK

您可以意识到div的宽度为200％，并包含一个translate属性

  <div class="container">
    <video controls="controls">
      <source 
        src="http://techslides.com/demos/sample-videos/small.mp4" 
        type="video/mp4"
      >
    </video>
  </div>

  .container{
        width: 200%;
        transform: translate(0px, 0px);
   }

您可以转到小提琴，然后单击右下角的三点项目（ Google Chrome 67 + ）。您将展示该事件，将容器向右移动。

如果我切换 transform：translate（0px，0px）; 到 left：0; top：0; 会起作用。

我的问题是：为什么这个新玩家有奇怪的行为，以及如何在不更改容器转换的情况下进行管理。

Answer 1

仅将容器的宽度更改为100％，将宽度设置为200％是不正确的

.container{
  width: 100%;
  transform: translate(0px, 0px);
 }

 .container video{
    width: 100%;
    height: 360px;
  }