Нет возможности развернуть видео с мобильных девайсов [РЕШЕНО]

Поделиться1Чт, 8 Фев 2018 23:43:42

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Давно хотел сообщить об этой ошибке.
Если просматривать форум с мобильного девайса, разрешение экрана которого 1920x1080 и ниже, то отсутствует какая-либо возможность развернуть видео с YouTube на полный экран

Ролик выглядит так

Полагаю это из-за того, что ширина фрейма у нас 480, высота 284

Посмотрел на многих других сайтах, где нет такой проблемы с мобильными девайсами, там ширина минимум 320, высота 180

<iframe width="320" height="180" src="https://www.youtube.com/embed/VdfWwAtygpw?rel=0&wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

p.s. хотя может быть причина в чём-то ещё

+3

Instagram drumman.1

Поделиться2Пт, 9 Фев 2018 23:29:11

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Решение:
добавить в мобильный стиль http://forumstatic.ru/style/mobile.5.css
такие строки

Код:

@media screen and (max-width: 540px) {
iframe[src*="embed/"],iframe[src*="video"] {width:320px !important; height:180px !important;}
}
@media screen and (max-width: 1080px) {
iframe[src*="embed/"],iframe[src*="video"] {width:320px !important; height:180px !important;}
}

приведёт ролики с (YouTube, VK и др.) к единому виду на разных девайсах

+5

Instagram drumman.1

Поделиться3Чт, 16 Авг 2018 23:14:28

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Romych
Тогда уж так:

Код:

@media screen and (max-width: 840px) {
.post-content iframe[allowfullscreen] {
    width: 320px !important; 
    height: 180px !important;
}
}

Не понял, зачем два кода, дублирующих один другой: второй у тебя уже включает в себя первый, по логике.

Добавлено спустя 6 минут 12 секунд:
Передал Максиму, обновим файл.

+3

ВКонтакте alex__63

Поделиться4Пт, 17 Авг 2018 09:23:29

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Alex_63 написал(а):

Не понял, зачем два кода, дублирующих один другой: второй у тебя уже включает в себя первый, по логике.

не помню уже, кажется делал под разный разворот мобильного в руке, потому что как мобилу не крути, кнопка "Развернуть во весь экран" так и не появлялась
ни так

ни эдак

0

Instagram drumman.1

Поделиться5Пт, 17 Авг 2018 19:42:42

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Romych
Ну поправка под большее разрешение затронет и меньшее... Но на экране 1050px (это же CSS пиксели, не аппаратные - они крупнее и их меньше на экране, у смартфона 1 аппаратный пиксель ведь не равен пикселю CSS) явно уже видео шириной 480px уместится, уменьшил хотя бы до 840 (ибо ширина видео 480 + ширина минипрофиля около 200 - точно умещается в экран, даже с учетом отступов в посте).

+1

ВКонтакте alex__63

Поделиться6Пт, 17 Авг 2018 21:04:54

Автор: sshmmv
Заслуженный
Зарегистрирован: Вс, 5 Мар 2017
Сообщений: 644
Уважение: +429
Позитив: +415
Последний визит:
Вс, 7 Апр 2024 18:59:27

Alex_63 написал(а):

Передал Максиму, обновим файл.

То есть, этот скрипт уже можно убрать?:

Код:

<!-- Автоуменьшение фреймов -->
<script type="text/javascript">
$(".post-content iframe[allowfullscreen]").each(function(){
    var w = $(this).width(),h = $(this).height(),k = h/w;
    var c = $(this).parents("p").width();if(c>w)return;
    $(this).attr("width",c).attr("height",c*k);
  });
</script>

0

Поделиться7Пт, 17 Авг 2018 21:08:03

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

sshmmv
Пока еще нет, обновления не было ни для extra.css для загрузчика в форме ответа, ни для mobile.css под отображение видео.
Когда обновится (видимо Максим не успел сегодня, занят был), то да, можно будет убрать.

0