PHP Lang
  1. PHP Lang
  3. Показать видео и миниатюры Youtube в правильном формате 9:16
Intereting Posts
post renamed filename из загрузки в базу данных Задать настраиваемый заголовок, а затем перенаправить Magento – Неустранимая ошибка: имя класса должно быть допустимым объектом или строкой Как безопасно хранить файлы cookie, содержащие конфиденциальные данные, в PHP? Как поймать эту ошибку: «Примечание: Неопределенное смещение: 0» Графики Google. Получите уравнение линейных линий тренда. Тестовый скрипт для параллелизма транзакций для postgresql Laravel Artisan CLI безопасно останавливает работников очереди демонов PHP пытается использовать функцию автозагрузки для поиска класса PDO Алгоритм Raycasting с GPS-координатами PHP: добавление лет в метку времени Как вставить несколько строк mysqli_multi_query ()? Класс Комментарий не найден Laravel 4 Как сделать REMOTE_USER при установке в PHP? Декодирование JSON в Twig

Показать видео и миниатюры Youtube в правильном формате 9:16

Я могу легко получить миниатюру изображения Youtube со ссылками, описанными здесь: Как получить миниатюру видео YouTube с YouTube API?

Но все эти миниатюры находятся в формате 3: 4 (или что-то близкое), хотя само видео находится в другом формате. Затем некоторые черные горизонтальные полосы видны только сверху и снизу изображения.

Мне нужно изображение в формате 9:16 (это мой видеоформат) без черных полос. Можно ли отступить?

Обновить

Похоже, что и видео Youtube имеет черные полосы сверху и снизу, даже если на видеоролике на странице Youtube нет черных полос.

Любые способы просто показать как миниатюру, так и видео в правильном формате?

Обновить

Я нашел это: Удаление черных границ 4: 3 на миниатюрах youtube

Ответчик хочет удалить черные верхние и нижние бары. Лучшие ответы здесь – отрегулировать высоту и «скрыть» черные полосы ручной коррекцией. Некоторые из комментариев, приведенных ниже, также показывают, что.
Означает ли это, что этого избежать нельзя?

По документации API:

Тег, который имеет значение атрибута yt: name mqdefault, идентифицирует миниатюру размером 320×180 (16: 9). Это изображение также не имеет метки времени и может быть из любой точки видео.

Таким образом, есть изображение, доступное для каждого разрешения видео (которое я тестировал, по крайней мере), который находится в формате 16: 9. Конечно, это не самый большой образ на планете …

Если размер является проблемой, и вам нужно что-то большее, лучше всего выбрать один из доступных вариантов, который всегда находится в соотношении 4: 3, и скрыть избыток с помощью CSS. Сам YouTube сделал это в течение длительного времени . В настоящее время они используют несколько размеров эскизов на своем сайте, включая mqdefault.jpg .

Очень легко скрыть избыточную ширину и / или высоту изображения, когда все размеры известны. Вот пример использования изображения 4: 3 с YouTube с скрытыми черными полосками, оставив результат 16: 9. CSS прокомментирован для вашего удовольствия.

YouTube предлагает изображения, которые не имеют черных полос 4: 3. Чтобы получить видеоизображение 16: 9 без черных полосок, попробуйте один из них: 

 http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

Первый mqdefault – это изображение размером 320×180 пикселей.

Второй maxresdefault – это изображение размером 1500×900 пикселей, поэтому для его использования в качестве миниатюры потребуется изменить размер. Это приятное изображение, но оно не всегда доступно. Если видео имеет низкое качество (менее 720p, я бы себе, не совсем уверен), то это «maxresdefault» становится недоступным. Поэтому никогда не полагайтесь на это.

После поиска в сети некоторое время для исправления этой проблемы я ничего не придумал, я думаю, что я пробовал все, и ничто не решило мою проблему. Затем, управляемый моей логикой, я просто завернул iframe встроенного видео youtube в одном div set overflow: hidden; к этому div и сделал его высотой на 2 пикселя меньше, чем высота iframe (на моем видео была черная рамка внизу). Таким образом, оболочка div меньше, чем iframe, и с позиционированием ее над видео вы можете скрыть черные границы, которые вам не нужны. Я думаю, что это лучшее решение из всего, что я пробовал до сих пор.

Из приведенного ниже примера попробуйте вставить только iframe, и вы увидите маленькую черную границу внизу, а когда вы завернете iframe в div, граница исчезнет, ​​потому что div перекрывает iframe, и он меньше, чем видео, и это имеет переполнение: скрыто, поэтому все, что выходит за рамки div, скрыто. 

 <div id="video_cont" style="width: 560px; height: 313px; overflow: hidden;"> <iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;autoplay=0&amp;rel=0&amp;fs=0&amp;showinfo=0&amp;controls=0&amp;hd=1&amp;wmode=transparent&amp;version=2;yt:quality=high;" frameborder="0" allowfullscreen></iframe> </div>

В моем случае граница была с высотой около 2 пикселей, поэтому я сделал оболочку div 2px меньшей по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится в верхней части видео или по бокам и / или с разными измерениями, вы должны иметь разные размеры для div-оболочки и позиционировать их так, чтобы они перекрывали видео, где находятся границы, и с переполнением: hidden; границы скрыты.

Надеюсь, это поможет.