У меня есть форма, встроенная в веб-страницу. После заполнения формы отображается видео YouTube с использованием встроенного iframe.
Когда я вхожу в полноэкранный режим видео на YouTube, ничего не происходит.
Ограничен ли полноэкранный режим вложенного iframe размерами родительского iframe?
user147215 31 Дек 2014 в 19:00
14 ответов
Лучший ответ
Добавление allowfullscreen=»allowfullscreen» и изменение типа встраивания YouTube устранило мою проблему.
Mosh Feu 17 Дек 2018 в 09:11
Помещение allowfullscreen внутри тега iframe без установки для него значения true уже устарело. Обновленный ответ на эту проблему, который является полноэкранным и недоступен для встроенных видео YouTube, — установить для параметра allowfullscreen значение true внутри тега:
Протестировано и работает без проблем во всех браузерах.
Jeanne vie 28 Фев 2020 в 07:05
В HTML5 просто используйте:
Этот атрибут может быть установлен в true , если фрейму разрешено переводить в полноэкранный режим, вызывая его метод Element.requestFullscreen() . Если это не установлено, элемент не может быть переведен в полноэкранный режим. См. Документы Mozilla.
Use full screen mode to improve your YouTube viewing experience
В платформе React.js используйте свойство allowFullScreen .
Обратите внимание, что есть больше ответов, указывающих на разные направления, поэтому надеюсь, что этот пост объединит и упростит все упомянутое с помощью последнего действующего подхода.
Jurosh 22 Авг 2018 в 17:03
Мне пришлось добавить атрибут allowFullScreen к «родительскому» iframe. Регистр атрибута имеет значение. Я не думаю, что Firefox или Edge / IE11 имеют атрибут allowFullScreen для конкретного браузера. Это выглядит примерно так:
Matt Goo 14 Июл 2016 в 22:56
React.JS Люди, помните allowFullScreen и frameBorder=»0″
Без верблюжьего футляра React удаляет эти бирки!
Funkodebat 24 Мар 2016 в 15:33
Если я правильно понимаю, у вас есть iframe, который содержит второй iframe (youtube).
Попробуйте добавить атрибут allowfullscreen в «родительский» iframe.
Для полной поддержки браузера это должно выглядеть так:
Nick T 28 Авг 2017 в 02:33
Заметил мой работал на хроме. Он заработал в Firefox , перейдя в и установив full-screen-api.allow-trusted-requests-only на false .
После того, как полноэкранный режим работал один раз, я мог вернуть его в истинное состояние, и полноэкранный режим все еще работал, что было довольно запутанным.
Harsha Biyani 27 Май 2019 в 13:35
Мне удалось найти относительно чистый и простой способ сделать это. Чтобы увидеть, как он работает, щелкните мою веб-страницу: http://developersfound.com/yde-portfolio.html и наведите указатель мыши на ссылку «Youtube Demos».
Ниже приведены два фрагмента, которые показывают, как это можно сделать довольно легко:
Я добился этого с помощью iFrame. Предположим, что эта DOM — это ‘yde-home.html’, который является источником вашего iFrame.
iFrame Container .OBJ-1 $(document).ready(function() < $(‘#myHiddenButton’).trigger(‘click’); >); View Full Screen
Предположим, это модель DOM, загружающая iFrame.
Full Screen Youtube $(document).ready(function() <>);
Я также проверил это с помощью W3c Validator, и он проверяет HTML5 без ошибок.
Также важно отметить, что: URL-адреса для встраивания Youtube иногда проверяют, исходит ли запрос с сервера, поэтому может потребоваться настроить тестовую среду для прослушивания вашего внешнего IP-адреса. Таким образом, вам может потребоваться настроить переадресацию портов на вашем маршрутизаторе, чтобы это решение работало.
После того, как вы настроили переадресацию портов, просто протестируйте с внешнего IP-адреса вместо LocalHost. Помните, что некоторым маршрутизаторам требуется переадресация портов от LocalHost / loopback, но большинство из них используют тот же IP-адрес, который вы использовали для входа в маршрутизатор. Например, если ваша страница входа в маршрутизатор — 192.168.0.1, тогда для переадресации порта необходимо использовать 192.168.0.? куда ? может быть любое неиспользуемое число (возможно, вам придется поэкспериментировать). С этого адреса вы должны добавить порты, которые прослушивает ваша тестовая среда (обычно 80, 81, 8080 или 8088).
user2288580 28 Сен 2016 в 20:04
Вставка после самого внешнего iframe изнутри вложенного iframe устранила проблему для меня.
var outerFrame = parent.parent.parent.$(‘.mostOuterFrame’); parent.$(», < src: ‘https://www.youtube.com/embed/BPlsqo2bk2M’ >).attr().addClass(‘youtubeIframe’) .css(< ‘width’:’675px’, ‘height’:’390px’, ‘top’:’100px’, ‘left’:’280px’, ‘z-index’:’100000′, ‘position’:’absolute’ >).insertAfter(outerFrame);
Thamilhan 4 Май 2016 в 12:53
Если добавление allowfullscreen не помогает, убедитесь, что у вас нет autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture» allowfullscreen>
Приведенный выше код поможет вам получить полноэкранный режим.
sameer tzar 28 Окт 2020 в 15:13
Просто добавьте allowfullscreen=»true» в iframe
Akitha_MJ 15 Авг 2020 в 05:56
В моем браузере Chrome на Ubuntu не работала кнопка «полноэкранный режим».
Я использовал модуль media_youtube для D6. В iframe использовался URL-адрес видео с шаблоном //www.youtube.com/v/videoidhere.
Я использовал функцию предварительной обработки темы, чтобы вывести ее на> //www.youtube.com/embed/videoidhere, и она сразу же начала позволять полноэкранной кнопке работать.
Короче говоря, попробуйте изменить / v / на / embed / в URL-адресе YouTube, если у вас возникла проблема.
Jason Silver 29 Май 2015 в 16:33
Лучшее решение и самый простой способ добиться этого с помощью этого простого кода:
Протестировано и работает без проблем во всех браузерах.
Источник: question-it.com
Как адаптировать видео с youtube на своем блоге
Привет всем на блоге wpsovet.ru. Это наверное будет последний урок в рубрике “мобильный блог”, потому что вроде как все аспекты разобрал. У многих у нас есть ролики на блога, и в основном они с ютуба, но они не особо адаптивны и их плохо смотреть с мобильников, как это устранить читайте дальше.
Разбор проблемы.
Не буду долго говорить, лишь приведу пример, вот так выглядит не адаптированное видео, правда плохо, край обрезается, это не красиво, не удобно, и как в минус ухудшает юзабилити.
А вот так выглядит уже подогнанное видео под размеры экрана, правда круто, а делов на пять минут с копейками.
Наверное озадачил, но давайте разбираться в ситуации, все решается двумя строчками стилей и внедрением их в само окошко видео.
Составляем и внедряем классы и стили.
Смотрите внимательно, вот вам сам код стилей (только не смейтесь, да он супер маленький).
.youtube
Его надо вставить, куда вы думаете? Правильно в style.css, идем в редактор и в любое место, а лучше в самый низ его и вставляем, смотрим на скриншот и действуем. Все ключевые моменты отмечены красным цветом.
Почему я взял 90%, потому что если бы на все 100, то видео упиралось бы в края окна, а так оно не зависимо от размера будет занимать девяносто процентов ширины области конента.
Соединяем класс с самим видео.
Я не знаю как вы берете с ютуба, я просто беру на прямую ссылку html и вставляю ее на сайт, все показано на скриншоте. Так намного проще и надежнее, зачем изобретать велосипед, если обо всем позаботился гугл.
Вот так выглядит та ссылка, которую я скопировал с сервиса.
А вот к этой я уже прописал тот класс, котрый до делали в файле стилей.
В итоге я просто беру и вставляю этот код в статью, во вкладке текст, куда мне надо и все готово, и если все сделано правильно, то статья и видео будут одинаково отображаться на маленьких экранах.
На этом все если у вас будут вопросы, то жду вас в комментариях.
Комментировать
http://ozog.ru Руслан
Как раз то что мне нужно в скором будущем! Спасибо, как всегда все доступно и понятно! 😉
https://wpsovet.ru Лифанов Валентин
Руслан, только советую тебе свой канал завести намного полезнее будет, ты много знашь по своей теме.
http://ozog.ru Руслан
Так видео вставлял по твоей рекомендации – все получилось с первого раза :), на планшете проверил – все гут!
Канал завел – а вот видео некогда делать, и там уже другой подход надо, хотя задумок полно!
Кстати – ты не знаешь как делают youtube.com/watch?v=8d8WNxgmcWMlist=LLYTlb0wkT1U_L5fP6bS99YQ такое видео? Ну очень мне понравилось! P.S. Я про стиль и оформления ролика!
https://wpsovet.ru Лифанов Валентин
Руслан, не незнаю, с ютубом так постольку поскольку, некогда его изучать, но я предполагаю что эта фича платная.
http://usvinternet.ru/ Андрей
Валентин, придется все видосы править на блоге. Или есть ещё фишка?
https://wpsovet.ru Лифанов Валентин
Нет фишки кончались, править ручками и еще раз ручками
http://usvinternet.ru/ Андрей
ОК, работаем ручками)
http://sergeylitvin.in.ua Сергей
Нужно было адаптировать youtube видео для лендинга. И ваша статься очень помогла. Спасибо огромное! Все получилось. Короткая, понятная и главное практически полезная статья.
https://wpsovet.ru Лифанов Валентин
Сергей спасибо, две строчки CSS и все в порядке.
Спасибо за такую полезную статью как раз искала пути решения после смены шаблона на адаптивный видео при просмотре в смартфоне обрезано наполовину Буду пробовать 😉
https://wpsovet.ru Лифанов Валентин
Пожалуйста был рад помочь.
http://zoomir61.ru Марина
К сожалению ваш метод описанный в статье на моем сайте не сработал. Сработало вот это. Хотите опубликуйте может кому поможет в адаптации видео с ютуб Это вставляется там где будет видео на странице между ними ссылка HTML с ютуба в стили CSS вставляем этот код .video-block <
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
> .video-block iframe <
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
>
https://wpsovet.ru Лифанов Валентин
Здравствуйте, не сработал потому что у вас был спор с другими стилями. Ваши стили 99% не пойдут у остальных, для адаптации большинства надо лишь прописать проценты длины и ширины. Как верстальщик я этот код не взял бы. Спасибо за дополнение Марина, ваш комментарий очень классный
http://pay-day.ru Максим Бойко
Спасибо за пост и решение проблемы. Я полтора года мозг парил, нигде найти инфу не мог. Сейчас воспользовался и всё сработало.
https://wpsovet.ru Лифанов Валентин
Рад был помочь.
https://messenger-wowapp.blogspot.com/ Алексей
всё это хорошо, только 90%, указанные в статье, мне не подойдут. Видимо придётся подбором искать эту цифру. На моём сайте изображения сжимаются под ширину мобильного устройства, а видео, к сожалению, нет. В результате Яндекс.Вебмастер ругается, что сайт не адаптирован для мобильных устройств. Не знаю, именно из-за видео или по другой причине.
Надо как-то ширину ролика автоматически подстраивать под ширину экрана.
https://wpsovet.ru Лифанов Валентин
Ну исходя из вашего сайта прописанного в имени, то он у вас вообще не адаптирован.
https://messenger-wowapp.blogspot.com/ Алексей
горизонтальная прокрутка только из-за видео. Google считает адаптированным, Яндекс нет. Вы с мобильного устройства смотрели?
https://messenger-wowapp.blogspot.com/ Алексей
Если Вы судите по адаптации, исходя из доменного имени, то конечно, спорить сложно Вы ставите 90%, а для какого устройства?
У Вас тут заголовок есть… “Лучшие блогИ”, поправьте, Валентин.
https://wpsovet.ru Лифанов Валентин
Про видео на вашем блоге, оно у меня отображается нормально, экран едет из за чего-то другого надо удалять элементы по очереди чтобы узнать причинный элемент. Я специалист именно в адаптации, а не в замене файлов и тому остальному при загрузке с разных устройств. Мой блог подстраивается под разные расширения а не под устройства, в этом смысл адаптивного дизайна. Меняйте домен и ставьте либо вордпресс либо джумлу, с блогспотом много не проживешь. Во поводу заголовка, он правильный, то есть это лучшие комментаторы моего блога, просто не люблю длинные заголовки.
https://messenger-wowapp.blogspot.ru/ Алексей
Просто, но работает только по ширине и в результате пропорции видео нарушаются. Это видно и на Вашей картинке. Марина Вам правильно написала, но там возникают другие проблемы. Согласовать высоту видео с шириной не получается. Так что не айс (
http://chudotechnique24.ru Даниил
Здравствуйте у меня в мобильной версии сайта видео с ютуба выходит за границы,пробовал ваш метод пока безрезультатно.
Источник: wpsovet.ru
Адаптивное видео на сайте с помощью CSS
Теперь нам нужно не дизайн сделать адаптивный, а плеер, ведь под фильмы онлайн идут с разных видео площадок, вообще много сайтов где можно взять код дна плеер для дальнейшего просмотра.
Здесь смысл простой, это адаптивность элемента, для того, чтобы гости и пользователи сайта просматривали с комфортом, а точнее делаем корректный показ как на самом большом мониторе, так и на экране самого небольшого экрана.
Для понятия, чтоб все элементы сайта должны иметь возможность масштабирования, а точнее происходит автоматическое изменения своего размера, которое зависит от размера экрана. Здесь оказалось не так сложно для кода вставки видео, где изначально нужно поместить в специальный контейнер, у нас будет adaptivny-video-rolik:
.adaptivny-video-rolik <
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
>
.adaptivny-video-rolik iframe,
.adaptivny-video-rolik object,
.adaptivny-video-rolik embed <
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
>
На этом вся установка, где видим, что только задействовали CSS.
Так то можно поставить точку, ведь все адаптивное видео сделано, так как сделали видеоролик по умолчанию растянутым по максиму по ширине экрана. Но так бывает, что для кого то этот вариант неудобен, хотя это безусловно самый актуальный вариант.
Здесь просто требуется, чтоб на широким или самых больших экранах ролик изначально имел размер ограничений. То здесь для этого нужно прописать код вызова видео ролика в заданный контейнер, под названием videorolika-pudsamed, что все также будет корректно выводить.
.videorolika-pudsamed <
width: 635px;
max-width: 100%;
margin: 1em auto;
>
И остается ознакомиться с двумя важными замечаниями:
В самом коде, что предоставляет видео, то здесь постоянно нужно указывать значения параметров width и height. А это нужно прописать конкретные значения, что в пикселях идут, либо поставить «auto», где автоматически установка произойдет. До этого рассматривали адаптивную рамку в виде ноутбука, что идет под оформление под плеер с YouTube.
При установках вы уже знаете формам плеера, это квадратный или в ширине меньше, чем по длине. А здесь нужно сохранить оригинальное соотношение сторон, для этого указываем для параметра контейнера videorolika-pudsamed значение 75 процентов в случае, если видео в формате 4:3 и 56.25% для формата 16:9, что можно посмотреть на demo, которое закреплено за материалом.
Источник: zornet.ru