Как сделать кнопку «play» как в YouTube?

Для создания кнопки "Play" в стиле YouTube на веб-странице используется тег <button> или <a>, а также CSS для стилизации. Ниже приведен пример кода HTML и CSS, который поможет вам создать кнопку "Play":

HTML:

<button class="play-button">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="10"></circle>
    <polygon points="40,30 40,70 70,50" fill="white"></polygon>
  </svg>
</button>

CSS:

.play-button {
  width: 80px;
  height: 80px;
  background-color: #ff0000; /* Цвет фона кнопки */
  border: none;
  border-radius: 50%; /* Делает кнопку круглой */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.play-button svg {
  width: 50%;
  height: 50%;
}

Пример выше создает круглую кнопку с треугольником внутри, похожей на кнопку "Play" в YouTube. Вы можете настроить размер, цвет и другие свойства кнопки, чтобы она соответствовала вашим потребностям.

Для добавления действия при нажатии на кнопку, вы можете использовать JavaScript. Например, добавить обработчик события клика для кнопки и запустить видео:

document.querySelector('.play-button').addEventListener('click', function() {
  // ваш код для воспроизведения видео
});

Таким образом, используя комбинацию HTML, CSS и JavaScript, вы можете создать кнопку "Play", похожую на ту, что используется на YouTube, и добавить необходимые функции для воспроизведения видео.