Нажатие на кнопку видео, которая находится внутри прокручиваемого div, перемещает его вправо

Question

Я создал скрипку, чтобы продемонстрировать проблему. LINK

Вы можете понять, что div имеет ширину 200% и атрибут перевода

  <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;
  }