У меня есть форма, которая iframed на веб-странице. По завершении формы видеоролик YouTube отображается с использованием iframe embed.
Когда я вхожу в полноэкранный режим видео YouTube, ничего действительно не происходит.
Является ли полноэкранный режим вложенного iframe ограниченными размерами родительского iframe?
Добавление allowfullscreen="allowfullscreen" и изменение типа встраивания YouTube устранили мою проблему.
Если я правильно понимаю, у вас есть iframe, содержащий второй iframe (один из них).
Попробуйте добавить атрибут allowfullscreen к "родительскому" iframe.
Для полной поддержки браузера он должен выглядеть следующим образом:
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
React.JS Люди, помните allowFullScreen и frameBorder="0"
Без верблюжьего корпуса реагируйте на полоски этих тегов!
Мне пришлось добавить атрибут allowFullScreen в "родительский" iframe. Случай с атрибутом имеет значение. Я не думаю, что Firefox или Edge/IE11 имеют специфичный для браузера атрибут allowFullScreen. Итак, это выглядит примерно так:
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
В HTML5 просто используйте:
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />
Этот атрибут может быть установлен в значение true если фрейму разрешено переводить в полноэкранный режим, вызывая его метод Element.requestFullscreen(). Если это не установлено, элемент не может быть переведен в полноэкранный режим. Посмотреть Mozilla Docs
В фреймворке React.js используйте свойство allowFullScreen.
Обратите внимание, что есть больше ответов, указывающих на разные направления, поэтому надеюсь, что этот пост объединит и упростит все упомянутое с последним подходящим подходом.
Я нашел решение, которое работало для меня на этой странице, благодаря кому-то по имени @orangecoat-ciallella
https://www.drupal.org/node/1807158
Кнопка "Полный экран" не работала в браузере Chrome на Ubuntu.
Я использовал модуль media_youtube для D6. В iframe он использовал URL-адрес видеоролика //www.youtube.com/v/videoidhere.
Я использовал функцию предварительной обработки темы, чтобы она выводилa > //www.youtube.com/embed/videoidhere и он сразу же начал разрешать работу полноэкранной кнопки.
Короче говоря, попробуйте изменить/v/to/embed/в URL-адресе YouTube, если у вас возникла проблема.
Если добавление allowfullscreen не помогает, убедитесь, что в вашем URL- allowfullscreen iframe нет &fs=0.
Лучшее и самое простое решение для достижения этой цели с помощью этого простого кода:
<iframe id="player" src="URL" allowfullscreen></iframe>
Протестировано и работает для всех браузеров без проблем.
Спасибо
Мне удалось найти относительно чистый простой способ сделать это. Чтобы увидеть это, нажмите на мою веб-страницу: http://developersfound.com/yde-portfolio.html и наведите указатель мыши на ссылку "Youtube Demos".
Ниже приведены два фрагмента, чтобы показать, как это можно сделать довольно легко:
Я достиг этого с помощью iFrame. Предполагая, что этот DOM является "yde-home.html", который является источником вашего iFrame.
<!DOCTYPE html>
<html>
<head>
<title>iFrame Container</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">.OBJ-1 { border:none; }</style>
<script>
$(document).ready(function() {
$('#myHiddenButton').trigger('click');
});
</script>
</head>
<body>
<section style="visibility: hidden;">
<button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;");">View Full Screen</button>
</section>
<section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;">
<iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;"
class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;">
</iframe>
</section>
</body>
</html>
Предположим, что это DOM, который загружает iFrame.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Full Screen Youtube</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {});
</script>
</head>
<body>
<iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;">
<p>Your browser does not support iFrames</p>
</iframe>
</body>
</html>
Я также проверил это против W3c Validator, и он проверяет HTML5 без ошибок.
Также важно отметить, что: URL-адреса встраивания Youtube иногда проверяют, поступает ли запрос с сервера, поэтому может потребоваться настроить тестовую среду для прослушивания внешнего IP-адреса. Поэтому вам может потребоваться настроить перенаправление портов на маршрутизаторе, чтобы это решение работало. Как только вы настроили переадресацию портов, просто проверьте внешний IP-адрес вместо LocalHost. Помните, что некоторые маршрутизаторы нуждаются в переадресации портов из LocalHost/loopback, но большинство используют тот же IP-адрес, который вы использовали для входа в маршрутизатор. Например, если ваша страница входа в маршрутизатор - 192.168.0.1, то для пересылки порта придется использовать 192.168.0.? где? может быть любым неиспользуемым номером (вам может потребоваться поэкспериментировать). Из этого адреса вы добавите порты, из которых будет прослушиваться тестовая среда (обычно 80, 81, 8080 или 8088).
Вставка после внешнего iframe изнутри вложенного iframe исправила проблему для меня.
var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />', {
src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
}).attr({'allowfullscreen':'allowfullscreen', 'frameborder':'0'
}).addClass('youtubeIframe')
.css({
'width':'675px',
'height':'390px',
'top':'100px',
'left':'280px',
'z-index':'100000',
'position':'absolute'
}).insertAfter(outerFrame);
Заметил мой, работал на хром. Чтобы он работал в Firefox, перейдите в full-screen-api.allow-trusted-requests-only <about:config> и установите для параметра full-screen-api.allow-trusted-requests-only значение false.
После того, как полноэкранный режим сработал один раз, я смог установить значение true, а полный экран все еще работал, что довольно озадачивало.