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

Question

[Ivan Ivanovich]

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

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

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

Кто-нибудь знает как это исправить и из-за чего это произошло?

Answer 1

[Антон Усачев]

Короче. Проблема в том, что труба воспринимает display: none как нулевые высоту и ширину, поэтому дает постеру самое плохое качество (пиксели эти самые). В сети нашлись варианты как сделать кастомный постер хорошего качества через youtube api. Но я нашел способ проще. Вместо того, чтобы долго рассказывать, просто покажу:



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

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

UPD2: Проверил, работает.

Answer 2

[tyzberd]

там есть ytp-cued-thumbnail-overlay-image и картинки
первое видео https://i.ytimg.com/vi/lfWDnyxt4bo/maxresdefault.jpg
второе https://i.ytimg.com/vi/lfWDnyxt4bo/default.jpg

Answer 3

[Дмитрий Арушанов]

Не уверен на 100 процентов
Но провел такое наблюдение
1) в первой табе видео было четким. Во второй слегка (да) размыто. Но после нажатия Play - оба стали нормально отображаться (в плане картинки)
2) Если отобразить сразу два видео (убрал display:none) - то со старта картинка выглядит одинаково во боих видео

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

Comments

[Ivan Ivanovich]

Дмитрий Арушанов Первый раз с таким столкнулся )

[Антон Усачев]

Вставил во вторую вкладку другое видео. Та же хрень. Думаю, это как-то связано с предзагрузкой видео самой трубой. Надо, видимо, смотреть их API на предмет 'preload video'.