Youtube iframe wmode выдает

134

Используя javascript с jQuery, я добавляю iframe с URL-адресом YouTube для отображения видео на веб-сайте, однако код для встраивания, загружаемый в iframe с YouTube, не имеет wmode = "Opaque", поэтому на странице отображаются модальные поля. под видео на YouTube.

Есть идеи как решить проблему?

iframe youtube wmode

— snakeyyy
источник

Это все еще проблема? Я использовал это решение раньше, но не могу воспроизвести исходную проблему в последней версии Chrome / Firefox / IE.

— marcovtwout

238

Попробуйте добавить ?wmode=opaqueк URL или, &wmode=opaqueесли уже есть параметр.

Если это не работает, попробуйте вместо этого, &wmode=transparentчто будет работать и в браузере IE.

— Shabith
источник

1

отлично! работает на Firefox и Chrome, но по какой-то причине не работает на IE ... есть идеи?

— Данфромисраэль

31

попробуйте использовать & amp; wmode = прозрачный

— Шабит

29

Параметр "& amp; wmode = xxxx" предполагает, что вы уже передаете параметры в URL. Я не был в моем случае, поэтому мне нужно добавить «? Wmode = xxxx» в URL.

— Мэтт Хаггинс

6

Различия между opaqueаtransparent . opaqueдолжен быть более производительным.

— пончик

3

Shabith - «Режим окна = Непрозрачные» должно быть «= непрозрачный режим окна» ( в нижнем регистре «о»)

— Джон

81

Попробуйте добавить ?wmode=transparentв конец URL. Работал на меня.

— Casper
источник

«Прозрачный» должен быть предпочтительным вариантом на мой взгляд.

— Foxinni

18

Если вы используете новый асинхронный API, вам нужно добавить параметр следующим образом:

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE HERE
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

Это основано на документации Google и примере здесь: http://code.google.com/apis/youtube/iframe_api_reference.html

— Пластиковый осетр
источник

7

Обратите внимание, что это также необходимо wmode в playerVars. Когда он находится под YT.Player, он будет работать только для проигрывателя HTML5. Добавление wmode в playerVars также отправляет этот параметр объекту Flash, который имеет свою проблему z-порядка. Смотрите здесь: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Я отредактирую ваш ответ соответственно.

— Дилан Макколл

1

Я попробовал это, и это не сработало. Я также не нашел ссылки на wmode в документации YouTude.

— sboisse

Ссылка изменилась с тех пор, как я впервые опубликовал, как и метод настройки wmode. Вы можете установить любой параметр flash сейчас или параметр плеера YouTube через playerVars. Я обновил приведенный выше пример.

— пластиковый осетр

Загрузка всего API только для того, чтобы изменить значение, которое можно легко изменить в URL-адресе, является полным излишним. Не используйте это.

— Фреганте

Некоторые из нас работают с Chromeless Player и уже используют JS API для управления пользовательским интерфейсом. Для нас это решение просто потрясающее! Спасибо

— maxijb

8

Добавление ?wmode=opaqueURL-адреса, похоже, решает эту проблему для меня, хотя я еще не тестировал его в IE.

Для тех из вас, у кого возникли проблемы с ранее предложенным решением, обратите внимание, что начальный амперсанд будет работать только в том случае, если вы уже передаете в URL другие аргументы. Первый аргумент должен иметь начальный знак вопроса:http://www.example.com?first=foo&second=bar

— Маркус Амальтея Магнусон
источник

Сначала я получал черный прямоугольник независимо от того, какое видео я пытался показать ... оказалось, что на тестовой машине не была установлена вспышка, а диалог для установки вспышки был слишком смещен!

— Зеб

3

Добавьте &wmode=transparentк URL, и все готово, проверено.

Я использую эту технику в своем собственном плагине WordPress шорткод YouTube

Проверьте его исходный код, если у вас возникнут какие-либо проблемы.

— Тубал Мартин
источник

Добавление & amp; wmode = прозрачного после того, как URL-адрес вашей трубки решил проблему во всех браузерах. Спасибо за мистера Тубала, Хорошая работа :)

1

Просто совет! - убедитесь, что вы подняли z-индекс элемента, который хотите поместить поверх встроенного видео. Я добавил строку запроса wmode, и она все еще не работала ... пока я не поднял z-индекс другого элемента. :)

— Тайсон Фалп
источник

0

&wmode=opaqueне работал для меня (хром 10), но &wmode=transparentпрояснил проблему прямо.

— imjared
источник

0

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

Добавление &wmode=opaqueв конец URL не работает в IE 10 ...

Тем ?wmode=opaqueне менее, добавление делает свое дело!

Нашел это решение здесь: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

— Янтарный июнь
источник

&и ?оба являются правильными в зависимости от того, в каком порядке они используются и какие другие параметры включены в URL. Очевидно ?, используется, если это первый (или единственный) параметр, в &противном случае.

— Алекс

Да, но у IE есть особые потребности. Просто попробуйте и посмотрите, что работает в IE 10, а что нет. Я еще не пробовал это в IE 11.

— Январь

0

недавно я увидел, что иногда флеш-плеер не распознает &wmode=opaque, если вы &WMode=opaqueтоже должны пройти (обратите внимание на верхний регистр).

— Nereo Costacurta
источник