Размер фрейма youtube под разные экраны

  • 15 Ответов
  • 1087 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
Доброго времени суток.

Как контролировать отображение размера видео с youtube на разных экранах? Имеется ввиду мобильных.

Код
<iframe width="100%" height="100%"> </iframe>
- увеличивает видео только в ширину
« Последнее редактирование: 15.03.2016, 16:37:25 от korskors »

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
max-width:100%;

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
max-width:100%;
Код
<iframe width="100%" height="100%"> </iframe>
- увеличивает видео только в ширину

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
heigh:auto;

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
heigh:auto;

<iframe width="100%" height="auto"> </iframe> - пробовал, не работает

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
iframe оберните в div с max-width:100%; и heigh:auto;, а в самом iframe размеры не пишите.

Код
{source}<div style="max-width: 100%; height: auto;"><iframe src="https://www.youtube.com/embed/6oqvyijacZI?rel=0" frameborder="0" allowfullscreen></iframe></div>{/source} // не работает

<div style="max-width: 100%; height: auto;">{source}&lt;iframe src="https://www.youtube.com/embed/6oqvyijacZI?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;{/source}</div> // не работает

<div style="display: block;">{source}&lt;div style="max-width: 100%; height: auto;"&gt;&lt;iframe src="https://www.youtube.com/embed/6oqvyijacZI?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;{/source}</div> // не работает
« Последнее редактирование: 15.03.2016, 17:03:08 от korskors »

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
iframe оберните в div с max-width:100%; и heigh:auto;, а в самом iframe размеры не пишите.

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
у вас наверно видео в каком-то диве стоит, а в нём высота определённая и поэтому размеры высоты YouTube не играют уже роль.
посмотрите в какой div вы код видео вставляете.
А если в материал-то лучше all videos плагин поставьте-он автоматом под любой размер экрана адаптирует.
и фреймы никакие вставлять не нужно-только код с браузерной строки в теги плагина.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
Ежели ему одно видео вставить, то зачем вешать плагин?

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Ежели ему одно видео вставить, то зачем вешать плагин?
вот именно, что не понятно "отображение размера видео с ютуба" - это 1 видео или видео во мн.числе.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

draff

  • Практически профи
  • *******
  • 2739
  • 169
  • step by step
А если в материал-то лучше all videos плагин поставьте-он автоматом под любой размер экрана адаптирует.
Был случай, что плагин и не отработал адаптивность, если он вообще подгоняет размер гугловского фрейм.
 И клиенту посоветовал, что лучше вставлять просто ссылку с YouTube в div.
В сети нашел.
Код
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
фрейм видео с Google оборачиваете в div с классом .video-container

*

Olg

  • Живу я здесь
  • ******
  • 1045
  • 73
Что это за звери {source}<div ... и </div>{/source} ?

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
Был случай, что плагин и не отработал адаптивность, если он вообще подгоняет размер гугловского фрейм.
 И клиенту посоветовал, что лучше вставлять просто ссылку с YouTube в div.
В сети нашел.
Код
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
фрейм видео с Google оборачиваете в div с классом .video-container


Спасибо огромное

*

korskors

  • Осваиваюсь на форуме
  • ***
  • 77
  • 0
Что это за звери {source}<div ... и </div>{/source} ?

Это чтоб сторонний код редактор не удалял


*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Был случай, что плагин и не отработал адаптивность, если он вообще подгоняет размер гугловского фрейм.
 И клиенту посоветовал, что лучше вставлять просто ссылку с YouTube в div.
В сети нашел.
Код
 .video-container {....}
фрейм видео с Google оборачиваете в div с классом .video-container
была аналогичная проблема с видео, пробовал разные варианты, но вот этот сработал и работает. Так что стили+div с классом