IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Размазанная картинка iframe, но почему?

Здравствуйте. Столкнулся с подобной проблемой первый раз и понятия не имею, как это можно исправить.

Есть код - https://jsfiddle.net/3j8afz29/1/

Обратите внимание, есть 2 вкладки, на обоих одинаковое видео с YouTube. Как видите на первой вкладке всё круто, но на второй это же видео у которого картинка размазана.

Кто-нибудь знает как это исправить и из-за чего это произошло?
  • Вопрос задан
  • 327 просмотров
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Короче. Проблема в том, что труба воспринимает display: none как нулевые высоту и ширину, поэтому дает постеру самое плохое качество (пиксели эти самые). В сети нашлись варианты как сделать кастомный постер хорошего качества через youtube api. Но я нашел способ проще. Вместо того, чтобы долго рассказывать, просто покажу:



Единственный минус: в контент табов больше ничего кроме видео не впихнешь, так как страницы размечены под 16 на 9.

UPD: Тут подумал, а что если при загрузке страницы вкладки будут обе активные (т.е. видны и видео загрузится), и только по docready ты будешь ненужные прятать скриптом? Это должно сработать.

UPD2: Проверил, работает.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@tyzberd
там есть ytp-cued-thumbnail-overlay-image и картинки
первое видео https://i.ytimg.com/vi/lfWDnyxt4bo/maxresdefault.jpg
второе https://i.ytimg.com/vi/lfWDnyxt4bo/default.jpg
Ответ написан
Комментировать
Не уверен на 100 процентов
Но провел такое наблюдение
1) в первой табе видео было четким. Во второй слегка (да) размыто. Но после нажатия Play - оба стали нормально отображаться (в плане картинки)
2) Если отобразить сразу два видео (убрал display:none) - то со старта картинка выглядит одинаково во боих видео

Это не решение проблемы, но все же.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы