У меня есть полноэкранное видео YouTube, встроенное в мой сайт.
Хорошо выглядит, когда размер браузера пропорционален ширине и высоте видео. Однако, когда я изменяю размер браузера в другой пропорции, вокруг видео появляются черные полосы.
Я хочу, чтобы видео всегда заполняло все окно, но без растягивания. Я хочу, чтобы «лишнее» скрывалось, когда размер браузера не пропорционален видео.
То, чего я пытаюсь добиться, вы можете увидеть на фоне этих двух веб-сайтов: http://ginlane.com/ и http://www.variousways.com/.
Можно ли это сделать с видео на ютубе?
Owly 28 Окт 2014 в 22:44
9 ответов
Я потратил много времени, пытаясь понять это, но вот простое решение CSS, которое работает для меня с использованием Flexbox. По сути, поместите видео в контейнер с абсолютной позицией, шириной и высотой 100% и заставьте его отображать: сгибайте и центрируйте содержимое!
Артефакты на видео при просмотре Youtube в браузере Chrome, Edge
CreativeR 14 Июн 2017 в 09:16
К сожалению, похоже, это не работает. Если я что-то не упустил: http://codepen.io/Archie22is/pen/EWWoEM
jQuery(document).ready(function($)< // — 1.78 is the aspect ratio of the video // — This will work if your video is 1920 x 1080 // — To find this value divide the video’s native width by the height eg 1920/1080 = 1.78 var aspectRatio = 1.78; var video = $(‘#videoWithJs iframe’); var videoHeight = video.outerHeight(); var newWidth = videoHeight*aspectRatio; var halfNewWidth = newWidth/2; video.css(); >);
user1616270user1616270 10 Мар 2017 в 14:04
Это довольно старое, но людям все еще может понадобиться помощь здесь. Мне это тоже нужно, поэтому я создал Pen для моего решения, которое должно помочь — http://codepen.io/MikeMooreDev /pen/QEEPMv
В примере показаны две версии одного и того же видео, одна стандартная, а вторая обрезана и выровнена по центру, чтобы соответствовать размеру полного родительского элемента без отображения отвратительных черных полос.
Вам нужно использовать javascript для расчета новой ширины видео, но это очень просто, если вы знаете соотношение сторон.
CSS — Высота и ширина видеообертки могут быть любыми, они могут быть в процентах, если вы того пожелаете.
.videoWrapper < height:600px; width:600px; position:relative; overflow:hidden; >.videoWrapper iframe
$(document).ready(function()< // — 1.78 is the aspect ratio of the video // — This will work if your video is 1920 x 1080 // — To find this value divide the video’s native width by the height eg 1920/1080 = 1.78 var aspectRatio = 1.78; var video = $(‘#videoWithJs iframe’); var videoHeight = video.outerHeight(); var newWidth = videoHeight*aspectRatio; var halfNewWidth = newWidth/2; video.css(); >);
Это также может быть вызвано изменением размера, чтобы гарантировать, что он остается отзывчивым. Самый простой (вероятно, не самый эффективный) способ сделать это заключается в следующем.
$(window).on(‘resize’, function() < // Same code as on load var aspectRatio = 1.78; var video = $(‘#videoWithJs iframe’); var videoHeight = video.outerHeight(); var newWidth = videoHeight*aspectRatio; var halfNewWidth = newWidth/2; video.css(); >);
Mike 17 Июн 2016 в 12:33
Чтобы имитировать тот же эффект, важно сохранить соотношение сторон 16:9.
iframe < width: 100%; height: calc((100vw*9) /16); >
Это удалит черные полосы.
Теперь мы можем установить внешний контейнер на 100% ширины и 100% высоты и скрыть переполнение.
.banner-video
Теперь приведенный выше код будет работать до тех пор, пока соотношение сторон окна просмотра не станет больше 16/9. Поэтому нам нужно добавить медиа-запрос на основе соотношения сторон.
После этого видео на YouTube будет поддерживать полный размер области просмотра при любых условиях и скрывать лишнюю часть видео. В отличие от Opera она поддерживается во всех браузерах.
kushal parikh 5 Сен 2019 в 07:20
Создайте контейнер div вокруг кода iframe и присвойте ему класс, например:
.video-container < position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; >.video-container iframe, .video-container object, .video-container embed
Этот coolestguidesontheplanet.com является URL-адресом источника этого ответа.
Источник: question-it.com
5 причин, почему не работает видео на YouTube
Сегодня каждый пользователь Интернета знаком с сервисом YouTube. Это многомиллионная площадка, где люди могут смотреть интересные видео и делится своими наработками со всем миром. Разработчикам YouTube удалось создать удобный и легкий в использовании видеохостинг и видеоплеер. Но иногда пользователи сталкиваются с проблемой, когда видеозапись на ютубе не воспроизводится.
И чаще всего, это проблема не на YouTube, а на локальном компьютере посетителя. Из этой статьи вы узнаете, что делать, если не работает видео на YouTube и как это исправить.
Причина №1 – интернет соединение
Как и любой другой онлайн ресурс, YouTube требует стабильного и быстрого интернет соединения. Проблемы с подключением к сети могут привести к притормаживанию видео, или его остановке. Зайдите на любой другой сайт и посмотрите, есть ли подключение, и насколько быстро загружаются страницы. Если у вас пропал Интернет, попробуйте перезагрузить роутер, компьютер, позвонить провайдеру. Использование VPN сервисов также влияет на стабильность подключения и скорость передачи данных.
Последнее время большинство просмотров на YouTube совершаются с мобильных устройств. Скорость мобильного интернета часто падает, потому возможны проблемы с отображением видео. Но в YouTube и об этом позаботились, предоставив пользователю возможность выбирать, в каком качестве смотреть ролики.
Чем ниже качество видео – тем ниже требования к подключению. Попробуйте уменьшить качество видео до 420p, или 360p. Если уж совсем все плохо – 144p. Кстати, многие так делают для экономии мобильного интернет-трафика. Чтобы видео не останавливалось каждые несколько секунд/минут – поставьте его на паузу и подождите некоторое время.
Серая полоска проигрывателя показывает загрузку видео в кэш, что позволит беспрерывно посмотреть ролик.
Причина №2 – браузер
Если с интернетом все хорошо, второй в списке подозреваемых это браузер – Chrome, Firefox, Opera или Edge. Все современные браузеры имеют функционал для просмотра видео на большинстве Интернет ресурсов.
Обновление
Раньше для корректной работы ютуба требовался плагин Flash Player, но позже сервис отказался его поддерживать, разработав новый плеер на HTML5.
HTML5 поддерживается всеми новыми версиями браузеров. Если вы давно не обновляли браузер – самое время это сделать. Скачайте и установите последнюю версию, и, скорее всего, видео на YouTube заработает, а серфинг в интернете станет удобнее и безопаснее.
Очистка временных файлов
Не работает видео на YouTube в Google Chrome? Запустите его в другом браузере, например Firefox. Если проблема появляется только в одном браузере, необходимо почистить куки и кэш. Каждый браузер имеет инструменты для очистки Cookies и Cache. Также можно воспользоваться CCleaner.
В Chrome зажмите комбинацию клавиш Ctrl+Shift+Del, поставьте галочки как на скриншоте, и запустите очистку. В Firefox необходимо зайти в Настройки и в разделе Приватность и Защита найти подраздел История. С помощью галочек отметьте кэш и куки, выберите период и нажмите “Очистить”.
отключение черных полос на YouTube вставлять iFrame
Я вставляю видео с youtube на мою веб-страницу. Я хочу, чтобы он растянулся на 100% на экране без черных панелей. Хотя я даю ему ширину 100%, у нее все еще есть черные бобы по бокам видео. Как я могу избавиться от него? Снимок экрана: фрагмент : https://jsfiddle.net/o3rp6an9/1/
#video
Еще один вопрос об этом, но это в основном не помогло мне.
Ümit Aparı 13 май 2017, в 17:59
Источник: overcoder.net