Я хочу, чтобы iFrame был отзывчивым и центрировался по горизонтали на странице, но я также хочу, чтобы его максимальная ширина составляла 500 пикселей. Пока мне удается только сделать его отзывчивым, но не центрированным.
const VideoWrapper = styled.div`
max-width: 500px;
`;
const IFrameContainer = styled.div`
position: relative;
height: 0;
padding-bottom: 88%;
overflow: hidden;
margin: 0 auto;
iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
`;
Я выбрал 88%, потому что это правильный формат для моего видео, адаптивный работает отлично.
Но когда я попробуйте добавить гибкий дисплей с выравниванием по центру контента, iframe исчезнет. То же самое для поля слева-справа.
<VideoWrapper>
<IFrameContainer>
<iframe title="player" id="player" scrolling="no"></iframe>
</IFrameContainer>
</VideoWrapper>
Это React и стилизованный код компонента.
Спасибо за помощь.