• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Адаптация видео с You Tube
Alex_L_X
Воскресенье, 13 Марта 2016, 12:22 | Сообщение 1
Оффлайн
Vip
Сообщений:162
Награды: 3
Здравствуйте. Вопрос касаемо адаптации видео в странице материалов и комментариев к нему на мобильный.
К примеру ссылка на статью где видео с YouTube в статье растягивает окно, так как дизайн страницы с адаптацией.

Какое значение и куда надо дать чтобы в мобильном оно отображалось корректно
Страна: (KZ)
Angerfist
Воскресенье, 13 Марта 2016, 13:02 | Сообщение 2
Оффлайн
Vip
Сообщений:767
Награды: 21
Дл я начала надо адаптировать сам шаблон сайта, но если первый этап видео то ещё раз отвечу в упаковщик
Код
<div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

Код самого плеера явно в $MESSAGE$ то выводим так чтобы в каждом материале не добавлять:

Код
<div class="video-container">$MESSAGE$</div>
тут главное чтоб в $MESSAGE$ не было кроме видео текста описания, а то бред получится


No regrets
Страна: (RU)
Сопрано
Воскресенье, 13 Марта 2016, 21:20 | Сообщение 3
Оффлайн
Vip
Сообщений:461
Награды: 4
Angerfist, а там и так адаптация и теперь еще нужно делать под мобильную.
Страна: (RU)
Kosten
Воскресенье, 13 Марта 2016, 22:11 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Но что поделать, сейчас адаптация в моде. cool
Страна: (RU)
Angerfist
Воскресенье, 13 Марта 2016, 22:27 | Сообщение 5
Оффлайн
Vip
Сообщений:767
Награды: 21
Alex_L_X, я так понял ты насчёт скрипта не прочитал в комментариях? Давай ещё раз... скачай скрипт который я выложил, далее всю папку со всеми внутренностями залей в корень сайта и на странице вызывай скрипт допустим таким образом
Код
<script src="/fluidvids/dist/fluidvids.js"></script>
на странице перед
Код
</body>
. Сам не тестировал но на странице с Демо видел работает, через Responisator проверил и кстати если что посмотри исходный код страницы с демо и думаю всё яснее станет.
Или таким образом
Код
<script src="http://loveanimal.ru/fluidvids/dist/fluidvids.js"></script>
вообщем путь до скрипта. Архив внизу сообщения - прикрепления.
Прикрепления: fluidvids.rar (8.3 Kb)


No regrets

Сообщение отредактировал
Angerfist - Понедельник, 14 Марта 2016, 02:03
Страна: (RU)
Alex_L_X
Воскресенье, 13 Марта 2016, 23:43 | Сообщение 6
Оффлайн
Vip
Сообщений:162
Награды: 3
Цитата
скачай скрипт который я выложил

Подскажите, где вы его выложили.

Angerfist, спасибо, проверю завтра и тут отпишу результаты


Сообщение отредактировал
Alex_L_X - Воскресенье, 13 Марта 2016, 23:44
Страна: (KZ)
Angerfist
Понедельник, 14 Марта 2016, 20:43 | Сообщение 7
Оффлайн
Vip
Сообщений:767
Награды: 21
Я тут тебе еще кое что нашёл Адаптивный видеоплеер для сайта

No regrets
Страна: (RU)
Kosten
Понедельник, 14 Марта 2016, 20:55 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Angerfist, что то плотно за видео взялись, но если сможете своими словами описать, в разделе Web мастеру, думаю безусловно многим интересно будет, только своими словами. wink
Страна: (RU)
Alex_L_X
Понедельник, 14 Марта 2016, 22:51 | Сообщение 9
Оффлайн
Vip
Сообщений:162
Награды: 3
Angerfist, интересно я попробую, плох что на айос не пашет
Страна: (KZ)
Angerfist
Понедельник, 14 Марта 2016, 23:03 | Сообщение 10
Оффлайн
Vip
Сообщений:767
Награды: 21
Alex_L_X, цитирую: "Старый код embed для вставки видео с Yotube не будет работать на IOS устройствах, так как они на базе Flash", материал там за 2013 год, Yotube больше с флеш вообще не работает, всё теперь на HTML5

No regrets

Сообщение отредактировал
Angerfist - Понедельник, 14 Марта 2016, 23:04
Страна: (RU)
Kostik-malek
Вторник, 15 Марта 2016, 05:35 | Сообщение 11
Оффлайн
Пользователи
Сообщений:7
Награды: 0
А как быть у кого кино сайт, там только этим не обойтись.
Страна: (RU)
Alex_L_X
Вторник, 15 Марта 2016, 16:55 | Сообщение 12
Оффлайн
Vip
Сообщений:162
Награды: 3
Angerfist, куда его вкрутить то надо?

Добавлено (15.03.2016, 16:55)
---------------------------------------------
Если он не способен на странице материалов блога сделать адаптивным от 2-х и более видео на телефон - то это гов*о скрипт


Сообщение отредактировал
Alex_L_X - Вторник, 15 Марта 2016, 16:56
Страна: (KZ)
workman
Вторник, 15 Марта 2016, 18:46 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Код
@media only screen and (max-width:768px) {
iframe {max-width:100%;}
}
Страна: (RU)
Alex_L_X
Среда, 16 Марта 2016, 04:09 | Сообщение 14
Оффлайн
Vip
Сообщений:162
Награды: 3
workman, что то в этом есть
Страна: (KZ)
Kosten
Среда, 16 Марта 2016, 04:57 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Не в курсе полного расклада, но точно знаю, что адаптация проходит почему то с @media, может кто объяснить, так как 2 года назад, в CSS мне не встречался такой стиль.
Страна: (RU)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: