Встроенное CSS-адаптивное встроенное видео с максимальной шириной - PullRequest
0 голосов
/ 10 мая 2018

Мой вопрос касается того, как я могу использовать встроенный CSS для встраивания видео YouTube, чтобы оно не только было адаптивным, но имело максимальный размер и оставалось в центре страницы. (Я знаю, что не должен использовать встроенный CSS! Я использую его только потому, что не могу работать ни с чем, кроме файла HTML.) Когда я впервые внедрил его, он имел фиксированный размер, поэтому он не подходил мобильные экраны. В Интернете я нашел ресурсы, которые показали мне, как сделать так, чтобы он соответствовал ширине страницы, поэтому я скопировал и вставил его в HTML по их указанию. Оно гласит:

<div style="position:relative;
padding-bottom:56.25%;
padding-top:35px;
height:0;
overflow:hidden;">
   <iframe style="position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    "width="560"
    height="315"
    src="redacted for privacy"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen="">
    </iframe>
</div>

Теперь он отлично реагирует, но на рабочем столе выглядит огромным, потому что он полноразмерный. Я хотел бы отредактировать код так, чтобы он максимально увеличивался до определенного размера; скажем, около 600 пикселей в ширину, например. У меня есть некоторые базовые знания HTML / CSS, но мне совершенно непонятно, что происходит в этом фрагменте кода. Код выглядит для меня несколько странно, и ни один из попыток, которые я пробовал, не смог максимально увеличить его при определенном размере и / или оставаться в центре страницы.

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Я отредактировал ваш код, пожалуйста, используйте его, и ваше видео будет идеально отцентрировано относительно каждого разрешения экрана.

<div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;"> <iframe style="position: absolute; top:0; left: 50%; transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%); width: 100%; max-width:600px; max-height:400px; height: 100%;" src= "redacted for privacy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=> </iframe> </div>
0 голосов
/ 10 мая 2018

оставьте ширину равной 100%, затем добавьте еще один атрибут: max-width:600px;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...