YouTube iframe embed-полный экран
У меня есть форма, которая iframed в веб-страницу. По завершении формы отображается видео YouTube с использованием iframe embed.
когда я вхожу в полноэкранный режим Видео YouTube, ничего не происходит.
является ли полноэкранный режим вложенного iframe ограниченным размерами родительского iframe?
8 ответов
Если я правильно понимаю, у вас есть iframe, который содержит второй iframe (youtube).
Попробуйте добавить allowfullscreen
атрибут "родительского" iframe.
для полной поддержки браузера он должен выглядеть так:
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
реагировать.Яш, помнишь allowFullScreen
и frameBorder="0"
без верблюда случае, реагировать полосы эти теги!
добавление allowfullscreen= "allowfullscreen" и изменение типа YouTube embed исправлена моя проблема.
мне пришлось добавить атрибут 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
на реагировать.фреймворк на JS использовать собственность allowFullScreen
.
обратите внимание, что есть больше ответов, указывающих на разные направления, поэтому надеюсь, что этот пост объединится и упростите все упомянутые с последним правильным подходом.
Я нашел решение, которое сработало для меня на этой странице благодаря кому-то по имени @orangecoat-ciallella
https://www.drupal.org/node/1807158
кнопка "полный экран" не работает в моем браузере Chrome на Ubuntu.
Я использовал модуль media_youtube для D6. В iframe он использовал URL-адрес видео шаблона //www.youtube.com/v/videoidhere.
Я использовал тему функции предобработки сделать его выход > //www.youtube.com/embed/videoidhere и он сразу же начал позволять полноэкранной кнопке работать.
короче говоря, попробуйте изменить/ v /to/ embed / в URL YouTube, если у вас возникли проблемы.
вставка после самого внешнего 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);
мне удалось найти относительно чистый простой способ сделать это. Чтобы увидеть его работу, нажмите на мою веб-страницу:http://developersfound.com/yde-portfolio.html и наведите курсор на ссылку "демонстрации Youtube".
Ниже приведены два фрагмента, чтобы показать, как это можно сделать довольно легко:
Я достиг этого с помощью iFrame. Предполагая, что этот дом-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, который загружает фрейм.
<!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, и он проверяет HTML5 без ошибок.
также важно отметить, что: YouTube embed URLs иногда проверяет, поступает ли запрос с сервера, поэтому может потребоваться настроить тестовую среду для прослушивания вашего внешнего IP-адреса. Поэтому вам может потребоваться настроить переадресацию портов на маршрутизаторе, чтобы это решение работало. После настройки переадресации портов просто проверьте с внешнего IP-адреса вместо LocalHost. Помните, что некоторые маршрутизаторы нуждаются в переадресации портов от LocalHost / loopback, но большинство используют тот же IP, который вы использовали для входа в маршрутизатор. Например, если ваша страница входа в маршрутизатор 192.168.0.1, то порт вперед должен был бы использовать 192.168.0.? куда ? может быть любое неиспользуемое число (Вам может потребоваться поэкспериментировать). С этого адреса вы добавите порты, которые прослушивает ваша тестовая среда (обычно 80, 81, 8080 или 8088).