YouTube iframe embed - полноэкранный режим

Question

YouTube iframe embed - полноэкранный режим

У меня есть форма, которая iframed в веб-страницу. После завершения формы, видео YouTube отображается с помощью iframe embed.

когда я вхожу в полноэкранный режим Видео YouTube, ничего не происходит.

является ли полноэкранный режим вложенного iframe ограничен размерами родительского iframe?

870 8

html iframe

8 ответов:

Comments

Ничего не найдено.

CdB · Accepted Answer · 2017-08-28 05:33:01

Если я правильно понимаю, у вас есть iframe, который содержит второй iframe (youtube one).
Попробуйте добавить allowfullscreen атрибут "родительского" iframe.

для полной поддержки браузера он должен выглядеть так:
<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe> 

Funkodebat · Accepted Answer · 2016-03-24 17:33:21

реагировать.Яш, помнишь allowFullScreen и frameBorder="0"

без camel-case, react удаляет эти теги!

Neil · Accepted Answer · 2015-01-07 21:17:43

добавление allowfullscreen= "allowfullscreen" и изменение типа YouTube embed исправлена моя проблема.

Matt Goo · Accepted Answer · 2016-07-15 01:56:48

мне пришлось добавить атрибут allowFullScreen к "родительскому" iframe. Случай атрибута имеет значение. Я не думаю, что Firefox или Edge/IE11 имеет атрибут allowFullScreen для браузера. Так это выглядит примерно так:

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>

Jurosh · Accepted Answer · 2018-08-22 20:03:08

в HTML5, просто используйте:
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen /> 
этот атрибут может быть установлен для true если кадр можно поместить в полноэкранный режим, вызвав его Element.requestFullscreen() метод. Если это не установлено, элемент не может быть помещен в полноэкранный режим. Смотрите Mozilla Docs

на реагировать.фреймворк на JS использовать собственность allowFullScreen.

обратите внимание, что есть больше ответов, указывающих на разные направления, поэтому надеюсь, что этот пост объединит и упростите все упомянутые с последним действительным подходом.

Jason Silver · Accepted Answer · 2015-05-29 19:33:59

Я нашел решение, которое работало для меня на этой странице благодаря кому-то по имени @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 /на/ embed / в URL YouTube, если у вас возникли проблемы.

Alan King · Accepted Answer · 2016-05-04 15:53:41

вставка после самого внешнего 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);

user2288580 · Accepted Answer · 2016-09-28 23:04:00

мне удалось найти относительно чистый простой способ сделать это. Чтобы увидеть его работу, нажмите на мою веб-страницу: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 без ошибок.

также важно отметить, что: URL-адреса YouTube embed иногда проверяют, поступает ли запрос с сервера, поэтому может потребоваться настроить тестовую среду для прослушивания на вашем внешнем IP-адресе. Поэтому для работы этого решения может потребоваться настроить переадресацию портов на маршрутизаторе. После того, как вы настроили переадресацию портов, просто проверьте внешний IP-адрес вместо LocalHost. Помните, что некоторые маршрутизаторы нуждаются в переадресации портов с LocalHost/loopback, но большинство используют тот же IP, который вы использовали для входа в маршрутизатор. Например, если ваша страница входа в маршрутизатор 192.168.0.1, то порт forward должен будет использовать 192.168.0.? куда ? может быть любое неиспользуемое число (Вам может понадобиться поэкспериментировать). С этого адреса можно добавить порты, которые прослушивает тестовая среда (обычно 80, 81, 8080 или 8088).