За последние 24 часа нас посетил 20741 программист и 1122 робота. Сейчас ищут 374 программиста ...

Резиновое видео Ютуб

Тема в разделе "PHP для новичков", создана пользователем Kizer, 12 окт 2018.

  1. Kizer

    Kizer Новичок

    С нами с:
    19 авг 2018
    Сообщения:
    44
    Симпатии:
    0
    У меня возникла сложность с созданием "резиновых" размеров для видео с ютуба, вот пример встраиваемого кода:
    Код (Text):
    1. <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
     
  2. Алекс8

    Алекс8 Активный пользователь

    С нами с:
    18 май 2017
    Сообщения:
    1.730
    Симпатии:
    359
    я когда то див делал по этой инструкции))

    Существует нативное решение на чистом CSS, которое позволяет создать пропорциональный блок, не требующий загрузки изображений и использования вспомогательных скриптов. Создать такой пропорциональный блок можно используя особую способность свойства CSS padding-bottom/top рассчитывать свое значение относительно ширины старшего контейнера.

    Для этого нам понадобиться три вложенных div элемента:

    HTML:
    1. <div class="top">
    2.   <div>
    3.     <div>Here contents</div>
    4.   </div>
    5. </div>
    Старший контейнер div.top будет обладать требуемой шириной, которая может быть выражена в любой единицах измерения.

    Код (CSS):
    1. div.top {
    2. width:100%;
    3. }
    Вложенному в него контейнеру div.top>div мы установим значение ширины равной 100%, т.е. вложенный блок всегда будет растягиваться на ширину старшего контейнера. А значение padding-bottom вложенного блока div.top>div мы установим равное отношению высоты к ширине в процентах. Т.е. если нам нужен блок с соотношением сторон 2:1, то значением padding-bottom должно быть 50%.

    Код (CSS):
    1. div.top > div {
    2. position:relative;
    3. width:100%;
    4. padding-bottom:50%; // Отношение высоте к ширине
    5. }
    Поскольку padding, по природе своей, является отступом между краем блока и его контентом, третий и заключительный контейнер div.top>div>div мы вынесем за пределы слоя, задав ему абсолютное позиционирование и 100% ширину, и высоту. В него мы разместим контент.

    Код (CSS):
    1. div.top > div > div {
    2. position:absolute;
    3. width:100%;
    4. height:100%;
    5. }
    Таким образом, при изменении фактической ширины старшего контейнера div.top, padding-bottom вложенного в него div блока будет всегда принимать высоту, равную 50% от ширины div.top. И Vuole — мы получаем пропорциональный блок, калькулируемый Css процессором.

    https://medium.com/@vladimirmorulus...ы-пропорционального-блока-в-html-6198b8612183
     
  3. Kizer

    Kizer Новичок

    С нами с:
    19 авг 2018
    Сообщения:
    44
    Симпатии:
    0
    Не помогло