Форум русской поддержки Joomla!® CMS
06.12.2016, 21:58:17 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 706 раз)
0 Пользователей и 1 Гость смотрят эту тему.
korskors
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 89


« : 15.03.2016, 15:31:21 »

Доброго времени суток.

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

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

Репутация: +73/-1
Offline Offline

Пол: Мужской
Сообщений: 1021


« Ответ #1 : 15.03.2016, 15:36:19 »

max-width:100%;
Записан
korskors
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 89


« Ответ #2 : 15.03.2016, 15:37:36 »

max-width:100%;
Код:
<iframe width="100%" height="100%"> </iframe>
- увеличивает видео только в ширину
Записан
Olg
Живу я здесь
******

Репутация: +73/-1
Offline Offline

Пол: Мужской
Сообщений: 1021


« Ответ #3 : 15.03.2016, 15:38:58 »

heigh:auto;
Записан
korskors
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 89


« Ответ #4 : 15.03.2016, 15:40:25 »

heigh:auto;

<iframe width="100%" height="auto"> </iframe> - пробовал, не работает
Записан
korskors
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 89


« Ответ #5 : 15.03.2016, 15:43:00 »

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, 16:03:08 от korskors » Записан
Olg
Живу я здесь
******

Репутация: +73/-1
Offline Offline

Пол: Мужской
Сообщений: 1021


« Ответ #6 : 15.03.2016, 15:49:23 »

iframe оберните в div с max-width:100%; и heigh:auto;, а в самом iframe размеры не пишите.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #7 : 15.03.2016, 15:51:22 »

у вас наверно видео в каком-то диве стоит, а в нём высота определённая и поэтому размеры высоты YouTube не играют уже роль.
посмотрите в какой div вы код видео вставляете.
А если в материал-то лучше all videos плагин поставьте-он автоматом под любой размер экрана адаптирует.
и фреймы никакие вставлять не нужно-только код с браузерной строки в теги плагина.
Записан
Olg
Живу я здесь
******

Репутация: +73/-1
Offline Offline

Пол: Мужской
Сообщений: 1021


« Ответ #8 : 15.03.2016, 15:55:44 »

Ежели ему одно видео вставить, то зачем вешать плагин?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #9 : 15.03.2016, 16:03:06 »

Ежели ему одно видео вставить, то зачем вешать плагин?
вот именно, что не понятно "отображение размера видео с ютуба" - это 1 видео или видео во мн.числе.
Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2653


step by step


« Ответ #10 : 15.03.2016, 16:05:43 »

А если в материал-то лучше 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
Живу я здесь
******

Репутация: +73/-1
Offline Offline

Пол: Мужской
Сообщений: 1021


« Ответ #11 : 15.03.2016, 16:08:00 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 89


« Ответ #12 : 15.03.2016, 16:11:06 »

Был случай, что плагин и не отработал адаптивность, если он вообще подгоняет размер гугловского фрейм.
 И клиенту посоветовал, что лучше вставлять просто ссылку с 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
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 89


« Ответ #13 : 15.03.2016, 16:11:49 »

Что это за звери {source}<div ... и </div>{/source} ?

Это чтоб сторонний код редактор не удалял
Записан
b2z
Support Team
*****

Репутация: +710/-0
Offline Offline

Пол: Мужской
Сообщений: 7533


Разраблю понемногу


« Ответ #14 : 15.03.2016, 16:29:51 »

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Записан
darkghost
Практически профи
*******

Репутация: +75/-0
Offline Offline

Сообщений: 1811



« Ответ #15 : 16.03.2016, 13:41:53 »

Был случай, что плагин и не отработал адаптивность, если он вообще подгоняет размер гугловского фрейм.
 И клиенту посоветовал, что лучше вставлять просто ссылку с YouTube в div.
В сети нашел.
Код:
.video-container {....}
фрейм видео с Google оборачиваете в div с классом .video-container
была аналогичная проблема с видео, пробовал разные варианты, но вот этот сработал и работает. Так что стили+div с классом
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet