У меня возникла сложность с созданием "резиновых" размеров для видео с ютуба, вот пример встраиваемого кода: Код (Text): <iframe width="560" height="315" src="https://www.youtube.com/embed/BkQIpvJrFmo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> А так же это видео стоит в блоке со стилями width="1100px" height="auto". Пытался менять в самом коде, на то что бы плеер принимал пропорциональную форму. Форма появлялась но не подчинялось max-width/height, просто выходило за рамки блока. Как задать нужный стиль? P.s. документацию API от ютуба читал, из полезного только: плеер не может быть меньше 200x200px
я когда то див делал по этой инструкции)) Существует нативное решение на чистом CSS, которое позволяет создать пропорциональный блок, не требующий загрузки изображений и использования вспомогательных скриптов. Создать такой пропорциональный блок можно используя особую способность свойства CSS padding-bottom/top рассчитывать свое значение относительно ширины старшего контейнера. Для этого нам понадобиться три вложенных div элемента: HTML: <div class="top"> <div> <div>Here contents</div> </div> </div> Старший контейнер div.top будет обладать требуемой шириной, которая может быть выражена в любой единицах измерения. Код (CSS): div.top { width:100%; } Вложенному в него контейнеру div.top>div мы установим значение ширины равной 100%, т.е. вложенный блок всегда будет растягиваться на ширину старшего контейнера. А значение padding-bottom вложенного блока div.top>div мы установим равное отношению высоты к ширине в процентах. Т.е. если нам нужен блок с соотношением сторон 2:1, то значением padding-bottom должно быть 50%. Код (CSS): div.top > div { position:relative; width:100%; padding-bottom:50%; // Отношение высоте к ширине } Поскольку padding, по природе своей, является отступом между краем блока и его контентом, третий и заключительный контейнер div.top>div>div мы вынесем за пределы слоя, задав ему абсолютное позиционирование и 100% ширину, и высоту. В него мы разместим контент. Код (CSS): div.top > div > div { position:absolute; width:100%; height:100%; } Таким образом, при изменении фактической ширины старшего контейнера div.top, padding-bottom вложенного в него div блока будет всегда принимать высоту, равную 50% от ширины div.top. И Vuole — мы получаем пропорциональный блок, калькулируемый Css процессором. https://medium.com/@vladimirmorulus...ы-пропорционального-блока-в-html-6198b8612183