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&amp;start=0&amp;rel=0&amp;fs=1&amp;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&amp;start=0&amp;rel=0&amp;fs=1&amp;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).