Как я могу превратить столбец, содержащий видео, в строку на мобильных устройствах?

Question

У меня есть этот фрагмент кода, который показывает встроенное видео на YouTube рядом с абзацем текста на моем веб-сайте.

<div class="container" style="width: 100%; display: table;">
<div style="width: 60%; display: table-cell; vertical-align: top; margin: 10px;">
Text Goes Here
</div>
<div style="width: 40%; display: table-cell; margin: 10px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

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

Как я могу сделать так, чтобы видео было ниже текста, особенно на мобильных устройствах или в узких браузерах? Использование iframe, кажется, ограничивает то, чего я хочу достичь, но я не могу придумать другой способ включения встроенного видео на YouTube.

Answer 1

Для достижения вашей цели вам нужны медиазапросы, которые вы используете для визуализации элементов отдельно в зависимости от размера экрана. Таким образом, вы можете создавать и адаптировать свои собственные визуализации для каждого устройства. Вы можете найти большой вклад в медиазапросы и как они работают здесь: https://www.w3schools.com/css/css_rwd_mediaqueries.asp