Iframe autoplay не работает

Настройка плеера YouTube

Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.

Панель управления

controls=0 – скрывает панель управления.

controls=1 – элементы управления отображаются в проигрывателе (по умолчанию).

controls=2 – работает так же как controls=1 , но обеспечивает увеличение производительности.

Кнопка полноэкранного режима

fs=0 – скрывает кнопку «Во весь экран».

fs=0

fs=1

Скрыть логотип YouTube

modestbranding=1 – скрывает логотип YouTube.

modestbranding=1

modestbranding=0

Цвет прогресс-бара

Только два варианта:

color=red – красный цвет (по умолчанию).

color=white – белый цвет прогресс-бара.

Выключить звук

Автовоисприведение

autoplay=0 запустит видео сразу после загрузки страницы. Еще понадобится добавить атрибут allow=»autoplay» .

Зацикленное видео

loop=1 включает воспроизведение по кругу, также нужно задать playlist=VIDEO_ID .

Начало и конец видео

start=60 – плеер начнет воспроизведение с 60-й секунды.

end=120 – воспроизведение остановится на 2й минуте.

Отключение клавиш управления

disablekb=1 – отключает управления c клавиатуры. Предусмотрены следующие:

• Пробел: воспроизведение/пауза
• Стрелка влево: вернуться на 10% в текущем видео
• Стрелка вправо: перейти на 10% вперед в текущем видео
• Стрелка вверх: увеличить громкость
• Стрелка вниз: уменьшить громкость.

Информация о видео

Плейлист

playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4 – список видео для воспроизведения, показ начнется после основного видео (VIDEO_ID).

Загружаемый контент в плеер

Параметр listType в сочетании с list определяет контент в плеере. VIDEO_ID в URL не указывается.

listType=search&list=xxx – поиск по видео.

listType=user_uploads&list=PLxxxxxxxx – канал YouTube, list определяет id канала.

listType=playlist&list=PLAYLIST_ID – плейлист канала YouTube.

Похожие видео

rel=0 – отключает плашку с рекомендованными видео после просмотра.

rel=1 – включает ее (по умолчанию).

Разное

playsinline=1 – включает воспроизведение видео в полноэкранном режиме на iOS.

cc_load_policy=1 – выводит титры даже в том случае, если пользователь их отключил.

iv_load_policy=3 – аннотации к видео (1 – отображаться, 3 – скрыты).

hl=ru – язык интерфейса проигрывателя в формате ISO 639-1.

origin=1 – включает дополнительные меры безопасности для IFrame API.

Источник

Как для встраиваемого видео youtube (iframe) включить автовоспроизведение и зациклить.

Когда вы встраиваете видео с youtube на ваш сайт, иногда нужно сделать так, чтобы оно воспроизводилось автоматически или (и) было зациклено.

Я хочу рассказать, как это можно сделать программно. Все делается очень просто: нужно к URL-адресу на видео добавить специальные параметры.

Вот общий вид такого кода:

У тега iframe в качестве атрибута src передается url-адрес на видео, которое нужно вставить. По умолчанию этот адрес выглядит вот так:

Для того, чтобы передать дополнительные параметры для видео, нужно поставить знак «?» в самом конце url и начинать перечислять параметры видео с их значениями вот в таком виде:

Отделять один параметр от другого нужно вот таким знаком «&».

В данном случае у меня передается три параметра:

1) autoplay – это и есть то самое автовоспроизведение. 1- включено, если поставить 0 – то оно будет отключено.

2) loop – этот параметр отвечает за зацикливание. Значения выставляются аналогично параметру autoplay.

3) playlist – этот параметр обязательно указать, чтобы начало работать зацикливание видео. В качестве значение указывается уникальный ID видео. Его можно посмотреть в самом начале ссылки на ваше видео.

Выделил его полужирным шрифтом.

В общем, используйте эти параметры и заставляйте видео работать так, как вам нужно. Удачи!

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

Источник

YouTube Autoplay not working

My website has a player for multiple videos. I’ve been adapting the code to use YouTube’s iframe API as the player. I can’t get the videos to autoplay. Here’s the relevant code:

The rest is standard YouTube iframe API script. You can see I tried setting Autoplay=1 as both an iframe parameter and as part of the iframe src. I’ve also tried including it in the data in the button. None of these seems to work. The vids load when the buttons are clicked, but they don’t autoplay.

6 Answers 6

It’s not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL. Autoplay Policy Changes

Audio/Video Updates in Chrome 73

Google said : Now that Progressive Web Apps (PWAs) are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest. https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa

mute=1 or muted=1 as suggested by @Fab will work. However, if you wish to enable autoplay with sound you should add allow=»autoplay» to your embedded .

This is officially supported and documented in Google’s Autoplay Policy Changes 2017 post

Iframe delegation A feature policy allows developers to selectively enable and disable use of various browser features and APIs. Once an origin has received autoplay permission, it can delegate that permission to cross-origin iframes with a new feature policy for autoplay. Note that autoplay is allowed by default on same-origin iframes.

When the feature policy for autoplay is disabled, calls to play() without a user gesture will reject the promise with a NotAllowedError DOMException. And the autoplay attribute will also be ignored.

Источник

YouTube Iframe встроить автоматическое воспроизведение

Я пытаюсь встроить новую версию iframe видео YouTube и получить его для автоматического воспроизведения.

насколько я могу судить, нет способа сделать это, изменив флаги на URL-адрес. Есть ли способ сделать это с помощью javascript и API?

12 ответов

это работает в Chrome, но не Firefox 3.6 (предупреждение: RickRoll video):

на JavaScript API для iframe встраивается существует, но по-прежнему публикуется как экспериментальная функция.

UPDATE: API iframe теперь полностью поддерживается и » создание YT.Объекты-проигрыватель — Пример 2″ показывает, как установить «автозапуск» в JavaScript.

встроенный код youtube имеет автозапуск по умолчанию. Просто добавьте autoplay=1 в конце атрибута» src». Например:

2014 iframe embed о том, как встроить видео youtube с автозапуском и без предлагаемых видео в конце клипа

В конце src iframe добавьте &enablejsapi=1 чтобы JS API можно было использовать на видео

и затем с jquery:

это должно воспроизводить видео автоматически на документе.готов

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

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

изменить: Я на самом деле не на 100% уверен в документе.готовый iframe будет готов, потому что YouTube все еще может загружать видео. На самом деле я использую эту функцию внутри функции click:

на флаги или параметры, которые вы можете использовать с iframe и OBJECT embeds, описаны здесь; подробности о том, какой параметр работает с каким игроком, также четко указаны:

Вы заметите, что autoplay поддерживается всеми игроками (AS3, AS2 и HTML5).

несколько запросов совет для тех, кто не знает (мимо меня и будущего меня)

если вы делаете один запрос с url просто ?autoplay=1 работает как показано в ответе mjhm

если вы делаете несколько запросов, помните, что первый начинается с ? в то время как остальные начинаются с &

Допустим, вы хотите выключить видео, но включить автозапуск.

и этого работает

но это не сработает..

пример сравнения

подробнее

прочитайте ответ NextLocal ниже для получения дополнительной информации об использовании нескольких строк запроса

С апреля 2018 года Google внес некоторые изменения в Автозапуск Политики. Поэтому вам придется сделать что-то вроде этого:

для использования javascript api,

для воспроизведения youtube с идентификатором:

Источник

Исчерпывающий путеводитель по тегу iframe

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.

Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.

Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.

Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.

Что такое iframe и зачем мы его используем?

Разработчики в основном используют тег iframe для встраивания другого HTML-документа в текущий.

Скорее всего, вы пересекались с ним, когда вам нужно было добавить сторонний виджет (например, знаменитую кнопку «Нравится» на Facebook), видео с YouTube, или рекламный раздел на вашем веб-сайте.

Например, приведенный ниже код будет отображать квадрат размером 500px с главной страницей Google:

Вот еще один пример, в котором мы показываем кнопку, чтобы твитнуть вашу веб-страницу в Twitter:

Когда вы думаете о iframe, вы должны иметь в виду, что он позволяет вам встраивать независимый HTML-документ с его контекстом просмотра.Таким образом, он будет изолирован от JavaScript и CSS родительского элемента. Это одна из веских причин использования iframe — обеспечить определенную степень разделения между вашим приложением и содержимым iframe.

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

(*Привет онлайн-казино, и сайтам любителей клубники )

Чтобы проиллюстрировать, насколько удобна эта изоляция от JavaScript и CSS, давайте взглянем на эти две ситуации:

1)В приложении пользователь может создавать электронные письма и сохранять их в качестве шаблонов. На определенной странице мне нужно было перечислить их, чтобы он мог просмотреть и выбрать одно из них. Но чтобы не допустить влияния CSS-кода текущего сайта на стиль этих шаблонов, я поняла, что необходимо использование iframe с атрибутом srcdoc . Это представилось самым чистым решением.

2)Другая ситуация, когда iframe спасли мне жизнь, возникла, когда пришлось создавать WYSIWYG-редактор для клиента. Проблема была связана с тем, что при помощи этих редакторов вы должны найти способ сохранить возможность производить фокус и выделение, когда пользователь нажимает на любые кнопки в интерфейсе.

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

Атрибуты, которые стоило бы знать работая с iframe

На сегодняшний день существует восемь атрибутов, которые мы можем использовать для настройки поведения или стилизации iframe.

Вы можете найти больше, чем перечисленные выше, но имейте в виду, что они больше не поддерживаются в HTML5: align, frameborder, longdesc, marginheight, marginwidth и scrolling…

*Примечание. По умолчанию элемент iframe имеет рамку вокруг него. Чтобы удалить его, вы можете использовать атрибут style, чтобы установить свойство CSS border в none.

iframe события и общение

Загрузка и ошибки

Поскольку iframe является документом, вы можете использовать большинство глобальных обработчиков событий. Когда вы запускаете iframe, есть пара событий, которые могут пригодятся для улучшения работы. Например, отображение счетчика или отдельное сообщение, чтобы помочь пользователю:

load event — cобытие загрузки. Оно запускается, когда iframe полностью загружен. Другими словами, все статические ресурсы были загружены, и все элементы в дереве DOM вызвали событие load.

Событие ошибки — error event которое вызывается при сбое загрузки.

Вы можете прослушивать их с помощью атрибутов onload и onerror соответственно:

Если хотите, то вы можете добавить слушателей в свой iframe программно.

Общение с фреймами

Довольно легко отправлять сообщения между родителем и iframe. Вы должны использовать функцию postMessage, которая описана в MDN здесь.

От родителя к фрейму

Отправьте сообщение от родительского элемента:

И послушайте его в iframe:

От iframe к родителю

Отправьте сообщение из iframe:

И прослушай это у родителя:

Примечание: имейте в виду, что вы можете оказаться в некоторых хитрых ситуациях, когда вам нужно что-то отладить, так как сообщения запускаются и забываются (fire-and-forget) (иначе говоря. — нет реальной обработки ошибок).

Безопасность

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

Таким образом, вы повышаете риск потенциальной уязвимости в вашем приложении или просто сталкиваетесь с плохим пользовательским интерфейсом (например, раздражающим автоматическим воспроизведением видео).

К счастью, вы можете занести в черный список или белый список конкретные функции.

Вы должны использовать sandbox (песочницу) и allow(допустимые) атрибуты.

! Помните, хорошее эмпирическое правило — всегда предоставлять минимальный уровень возможностей, необходимый ресурсу для его работы. Эксперты по безопасности называют эту концепцию «принципом наименьших привилегий».

Атрибут sandbox

Вот полный список флагов песочницы и их назначение:

Флаг	Описание
allow-forms	Позволяет отправлять формы
allow-modals	Позволяет ресурсу открывать новые модальные окна
allow-orientation-lock	Позволяет ресурсу блокировать ориентацию экрана.
allow-pointer-lock	Позволяет ресурсу использовать API блокировки указателя (Pointer Lock API)
allow-popups	Позволяет ресурсу открывать новые всплывающие окна или вкладки.
allow-popups-to-escape-sandbox	Позволяет ресурсу открывать новые окна, которые не наследуют песочницу.
allow-presentation	Позволяет ресурсу начать сеанс презентации.
allow-same-origin	Позволяет ресурсу сохранять свое происхождение.
allow-scripts	Позволяет ресурсу запускать сценарии.
allow-top-navigation	Позволяет ресурсу перемещаться по контексту просмотра верхнего уровня.
allow-top-navigation-by-user-activation	Позволяет ресурсу перемещаться по контексту просмотра верхнего уровня, но только если он инициирован жестом пользователя.

Вы несете ответственность, какие привилегии вы можете предоставить каждому iframe.

Например, если вашему iframe нужно только отправить формы и открыть новые модальные окна, вот как вы настроите атрибут песочницы:

В случае, когда атрибут песочницы настроен, а одна функция не работает правильно в ресурсе, это может быть связано с отсутствием определенного флага.
Убедитесь, что вы знаете о них больше, чтобы отладить вещи быстро.
Кроме того, имейте в виду, что использование пустого атрибута «песочница» полностью создаст «песочницу» для iframe.

Это означает, что JavaScript внутри iframe не будет выполняться, а все перечисленные выше привилегии будут ограничены (*например, создание новых окон или загрузка плагина).

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

Примечание. Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях.

Атрибут allow

Этот атрибут allow в настоящее время является экспериментальным и поддерживается только браузерами на основе Chromium. Это позволяет вам разрешить определенные функции белого списка, такие как доступ iframe к акселерометру, информации об аккумуляторе или камере.

Доступно более 25 флагов, поэтому я не буду перечислять их все здесь. Вы можете просмотреть их в документации по политике в отношении функциональных возможностей Mozilla.

Я суммировала самые популярные в таблице ниже:

Флаг	Описание
accelerometer	Позволяет получить доступ к интерфейсу акселерометра
ambient-light-sensor	Позволяет получить доступ к интерфейсу AmbientLightSensor
autoplay	Позволяет автоматически воспроизводить видео и аудио файлы
battery	Разрешает доступ к API состояния батареи
camera	Позволяет доступ к камере
fullscreen	Предоставляет доступ к полноэкранному режиму
geolocation	Разрешает доступ к API геолокации
gyroscope	Предоставляет доступ к интерфейсу Sensors API Gyroscope.
magnetometer	Предоставляет доступ к интерфейсу магнитометра API датчиков
microphone	Предоставляет доступ к микрофону устройства
midi	Разрешает доступ к веб-MIDI API
payment	Разрешает доступ к API запроса платежа
usb	Разрешает доступ к API WebUSB
vibrate	Allows access to the Vibration API

Что нужно знать о фреймах

Как решать проблемы с браузерами, которые не поддерживают фреймы

Если браузер не поддерживает iframe, он будет отображать содержимое, включенное между открывающим тегом и закрывающим тегом .

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

Как вы можете сделать так, чтобы iframe был частью родительского документа (т.е. без границ и полос прокрутки)?

Для этой цели был введен бесшовный атрибут seamless. Он все еще экспериментален и плохо поддерживается в браузерах (это понимают только Chromium).

*Примечание Он также не является частью спецификации W3C HTML5 на момент написания этой статьи. Ознакомиться тут

Могут ли iframes повлиять на SEO моего сайта?

Я мало что знала об этом, поэтому мне пришлось немного покопаться. Есть много спекуляций вокруг этой темы.

Долгое время краулеры не могли понять содержимое iframes, но это уже не так. Наиболее релевантный ответ, который я нашла, был из этой статьи, и сегодняшний вывод выглядит так:

“Поскольку поисковые системы считают, что содержимое в фреймах принадлежит другому веб-сайту, лучшее, на что вы можете надеяться, — это отсутствие эффекта. Iframes, как правило, не помогают и не повреждают ваш рейтинг в поисковых системах. “

Таким образом, лучше всего предположить, что контент, отображаемый с помощью iframes, может быть не проиндексирован или недоступен для отображения в результатах поиска Google. Обходным путем может быть предоставление дополнительных текстовых ссылок на контент, который они отображают, чтобы робот Googlebot мог сканировать и индексировать этот контент.

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

Могут ли фреймы повлиять на скорость загрузки моего сайта?

Каждый iframe на странице увеличивает объем используемой памяти, а также другие вычислительные ресурсы, такие как пропускная способность.Поэтому не следует чрезмерно использовать iframe, не следя за тем, что происходит, иначе вы можете повредить производительности своей страницы.

Чтобы избежать того, что ваши фреймы замедляют работу ваших страниц, хорошим способом является их ленивая загрузка (т.е. загрузка их только тогда, когда они необходимы, например, когда пользователь прокручивает рядом с ними).Этого легко добиться, просто добавив в тег атрибут loading = «lazy».

Имейте в виду, что все современные браузеры на основе Chromium поддерживают это на момент написания этой статьи. Вас заинтересует библиотека lazyload, которая работает везде.

Примечание. Атрибут loading = «lazy» также работает с тегом img, если вы еще этого не знали.

Как я могу сделать iframe отзывчивым?

По мере того, как все больше людей просматривают Интернет с помощью своих телефонов, важно убедиться, что каждый из ваших интерфейсов отзывчивый.Но как это сделать, если на вашей странице есть фрейм?

Мы могли бы посвятить целое руководство относительно множества способов сделать ваш iframe отзывчивым. Вместо этого я просто сошлюсь на две отличные статьи:

• Эта первая статья (возможно, с самым простым решением) покажет вам, как этого добиться, обернув свой iframe в другой элемент HTML и добавив в него несколько свойств CSS.
• Эта вторая статья покажет вам, как сделать iframe отзывчивым, имея дело с соотношениями сторон.
• Существует также библиотека Iframe Resizer, но имейте в виду, что она поставляется с множеством дополнительных функций, которые вам могут и не понадобиться, и просто раздуют ваш код.

Примечание. Если вы используете библиотеку начальной загрузки в своем проекте, есть embed-responsive и встроенные embed-responsive-16by9, которые вы можете использовать прямо из коробки, чтобы адаптировать свои фреймы.

Как предотвратить появление белой вспышки во время загрузки iframe

Да, друзья мои, для этого есть решение. В этой статье Крис Койер делится небольшим фрагментом, который скрывает все iframes на странице с помощью некоторого CSS-кода и удаляет его до тех пор, пока окно не будет загружено, а затем сделает их видимыми.

Как перезагрузить содержимое iframe

Легче лёгкого! Поскольку вы можете получить доступ к элементу окна iframe с помощью contentWindow, вы должны сделать это:

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

Если у вас есть что добавить в эту статью, вы можете связаться со мной в комментариях ниже или просто пинговать меня в Twitter @RifkiNada

Источник