YouTube iframe встраивает - полный экран

Question 1

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

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

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

Question 2

Добавление allowfullscreen="allowfullscreen" и изменение типа YouTube встраивает, устранил мою проблему.

Question 3

Question 4

Если я понимаю правильно, что у Вас есть iframe, который содержит второй iframe (YouTube один).
Попытка, добавляющая эти allowfullscreen атрибут к "родителю" iframe.

Для полной поддержки браузера это должно быть похожим на это:

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>

Question 5

Реагировать. Люди JS, помните allowFullScreen и frameBorder="0"

Без Camel-регистра, реагируйте, разделяет, они отклеивают!

Question 6

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

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

Question 7

Question 8

В HTML5 просто используйте:

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />

Этот атрибут может быть установлен на true, если кадру позволяют быть помещенным в полноэкранный режим путем вызова, это Element.requestFullscreen() метод. Если это не установлено, элемент не может быть помещен в полноэкранный режим. См. Документы Mozilla

В платформа React.js Примечание свойства allowFullScreen.

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

Question 9

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

Question 10

лучшее решение и самое легкое для достижения этого при помощи этого простого кода:

<iframe id="player" src="URL" allowfullscreen></iframe>

Протестированный и рабочий для всех браузеров без проблем.

Спасибо

Question 11

Если добавление allowfullscreen не помогает, удостоверьтесь, что Вы не имеете &fs=0 в Вашем iframe URL.

Question 12

Вставка после наиболее удаленного 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);

Question 13

Question 14

Мне удалось найти относительно чистый простой способ сделать это. Для наблюдения это работать нажимает на мою веб-страницу: http://developersfound.com/yde-portfolio.html и парение по 'ссылке' Образцов YouTube.

Ниже два отрывка, чтобы показать, как это может быть сделано довольно легко:

я достиг этого с 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&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, который загружает 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, и он проверяет HTML5 без ошибок.

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

Question 15

Замеченная шахта работала над хромом. Заставил это работать в Firefox путем движения в <about:config> и установки full-screen-api.allow-trusted-requests-only к false.

После того, как полный экран работал однажды, я мог задержать, это на истинный, и полный экран все еще работало, который был довольно озадачивающим.

Mosh Feu · Accepted Answer · 31 October 2019 в 13:06

Добавление allowfullscreen="allowfullscreen" и изменение типа YouTube встраивает, устранил мою проблему.

27

ответ дан Mosh Feu 31 October 2019 в 13:06

Nick T · Answer 2 · 31 October 2019 в 13:06

Если я понимаю правильно, что у Вас есть iframe, который содержит второй iframe (YouTube один).
Попытка, добавляющая эти allowfullscreen атрибут к "родителю" iframe.

Для полной поддержки браузера это должно быть похожим на это:

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>

Funkodebat · Answer 3 · 31 October 2019 в 13:06

Реагировать. Люди JS, помните allowFullScreen и frameBorder="0"

Без Camel-регистра, реагируйте, разделяет, они отклеивают!

Matt Goo · Answer 4 · 31 October 2019 в 13:06

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

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

Jurosh · Answer 5 · 31 October 2019 в 13:06

В HTML5 просто используйте:

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />

Этот атрибут может быть установлен на true, если кадру позволяют быть помещенным в полноэкранный режим путем вызова, это Element.requestFullscreen() метод. Если это не установлено, элемент не может быть помещен в полноэкранный режим. См. Документы Mozilla

В платформа React.js Примечание свойства allowFullScreen.

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

Jason Silver · Answer 6 · 31 October 2019 в 13:06

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

Jodyshop · Answer 7 · 31 October 2019 в 13:06

лучшее решение и самое легкое для достижения этого при помощи этого простого кода:

<iframe id="player" src="URL" allowfullscreen></iframe>

Протестированный и рабочий для всех браузеров без проблем.

Спасибо

zkytony · Answer 8 · 31 October 2019 в 13:06

Если добавление allowfullscreen не помогает, удостоверьтесь, что Вы не имеете &fs=0 в Вашем iframe URL.

0

ответ дан zkytony 31 October 2019 в 13:06

Thamilan · Answer 9 · 31 October 2019 в 13:06

Вставка после наиболее удаленного 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 · Answer 10 · 31 October 2019 в 13:06

Мне удалось найти относительно чистый простой способ сделать это. Для наблюдения это работать нажимает на мою веб-страницу: http://developersfound.com/yde-portfolio.html и парение по 'ссылке' Образцов YouTube.

Ниже два отрывка, чтобы показать, как это может быть сделано довольно легко:

я достиг этого с 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&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, который загружает 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, и он проверяет HTML5 без ошибок.

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

Harsha Biyani · Answer 11 · 31 October 2019 в 13:06

Замеченная шахта работала над хромом. Заставил это работать в Firefox путем движения в <about:config> и установки full-screen-api.allow-trusted-requests-only к false.

После того, как полный экран работал однажды, я мог задержать, это на истинный, и полный экран все еще работало, который был довольно озадачивающим.

YouTube iframe встраивает - полный экран

11 ответов

Другие вопросы по тегам:

Похожие вопросы: