Встраивание Youtube в полную ширину с помощью React.js - Адаптивное встраивание

В этой статье вы узнаете, как создать компонент React, который можно использовать для создания адаптивного компонента реакции для встраивания youtube.

Как только вы вставите свое первое видео на YouTube, вы быстро поймете, что оно не адаптивно и нарушает ваш дизайн.

К сожалению, iframe не может поддерживать это соотношение само по себе, поскольку домен является сторонним, вам не разрешено знать содержимое iframe из соображений безопасности и конфиденциальности.

Так что ты можешь сделать?

Мы можем создать div, который оборачивает встраивание и масштабируется по умолчанию до окна или родителя и сохраняет масштаб. Это можно заархивировать с помощью поля и внутри iframe, масштабировать до 100% как по ширине, так и по высоте, а затем ограничить высоту до «56,25%», что составляет 16/9 по шкале.

export default ({ youtubeId }) => {
  return (
    <div
      className="video"
      style={{
        position: "relative",
        paddingBottom: "56.25%" /* 16:9 */,
        paddingTop: 25,
        height: 0
      }}
    >
      <iframe
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%"
        }}
        src={`https://www.youtube.com/embed/${youtubeId}`}
        frameBorder="0"
      />
    </div>
  );
};

Удачного отзывчивого кодирования;)