Youtube embedded players and player parameters

Sélection des contenus à lire

Vous pouvez configurer votre lecteur intégré pour lire une vidéo, une playlist, des vidéos mises en ligne par un utilisateur ou des vidéos correspondant aux résultats d’une recherche particulière.


Ces options sont présentées ci-dessous :

  • Lecture d’une vidéo

    Avec une intégration iFrame, l’ID vidéo YouTube de la vidéo à lire est défini dans l’URL de l’iFrame.

    https://www.youtube.com/embed/VIDEO_ID

    Si vous utilisez l’API YouTube Data (v3), vous pouvez créer ces URL de façon programmée en récupérant les ID vidéo des , des , des ou d’autres ressources. Une fois l’ID vidéo récupéré, remplacez dans les URL ci-dessus par cette valeur pour créer l’URL du lecteur.

  • Lecture d’une playlist

    Définissez le paramètre du lecteur sur . Utilisez également l’ID de la playlist YouTube à charger pour définir le paramètre .

    https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID

    Sachez que vous devez ajouter les lettres au début de l’ID de playlist, tel qu’illustré dans l’exemple ci-dessous :

    https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6

    Si vous utilisez l’API YouTube Data (v3), vous pouvez créer ces URL de façon programmée en récupérant les ID de playlist des , des ou des . Une fois l’ID de la playlist récupéré, remplacez dans l’URL ci-dessus par cette valeur.

  • Lecture de vidéos mises en ligne par un utilisateur

    Définissez le paramètre du lecteur sur . Utilisez également le nom de l’utilisateur YouTube qui a mis en ligne les vidéos à charger pour définir le paramètre du lecteur.

    https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
  • Lecture de vidéos correspondant aux résultats d’une recherche spécifique

    Définissez le paramètre du lecteur sur . Utilisez également le terme de recherche utilisé pour trouver les vidéos à charger pour définir le paramètre du lecteur.

    https://www.youtube.com/embed?listType=search&list=QUERY

How can you easily use this free YouTube video embed code generator?

Underneath you will find a step-by-step tutorial that will help you to add YouTube videos to your website. Using this YouTube video generator you will be able to play a YouTube video in 5 steps.

  • Copy and paste the YouTube URL
  • Adjust the width of the YouTube video
  • Adjust the height of the YouTube video
  • Click the ‘generate my code’ button to copy the code.
  • Paste the embed YouTube code.

Recently, YouTube made changes to its site. They no longer use YouTube old embed code option and unfortunately the iframe code is not supported in all websites. Thus, some website developers are having a problem with putting videos. The good news is that, this YouTube embed code generator can help you because it still supports the old embed code option. Simply click the box for “Old Embed Code” then you will be able to generate the code for the YouTube video.

That’s all there is to it. Congratulations on your first page with an embedded video.

YouTube Autoplay Iframe Code – How to Make Your Tube Video Automatically Play:

First – you have to copy the code to your website, looks like this:

<iframe src=”https://www.youtube.com/embed/HSlD79sqHp4?rel=0″ frameborder=”0″ width=”560″ height=”315″></iframe>

&amp;autoplay=1

to the end of the You Tube URL – like this:

<iframe src=”https://www.youtube.com/embed/HSlD79sqHp4?rel=0&amp;autoplay=1” frameborder=”0″ width=”560″ height=”315″></iframe>

Here is the old version:

This is the old code:  press embed then check “use old code”. for example : <object width=”560″ height=”315″><param name=”movie” value=”https://www.youtube.com/v/HSlD79sqHp4?version=3&amp;hl=en_US&amp;rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”https://www.youtube.com/v/HSlD79sqHp4?version=3&amp;hl=en_US&amp;rel=0″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

Youtube Autoplay Embed Code

Where it says “&hl=en_US”  in both urls in the code replace that with “&autoplay=1” dont forget to erase the amp…etc. then replace it with “&autoplay=1” in both URLs – like this:

<object width=”560″ height=”315″><param name=”movie” value=”https://www.youtube.com/v/HSlD79sqHp4?version=3&autoplay=1&amp;rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”https://www.youtube.com/v/HSlD79sqHp4?version=3&autoplay=1&amp;rel=0″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

Genel Bakış

Bu belge, bir YouTube oynatıcısını uygulamanıza nasıl yerleştireceğinizi açıklar ve aynı zamanda yerleştirilmiş YouTube oynatıcısında mevcut olan parametreleri tanımlar.

Parametreleri IFrame sine ekleyerek uygulamanızdaki oynatma deneyimini özelleştirebilirsiniz. Örneğin, parametresini kullanarak videoları otomatik oynatabilir veya parametresini kullanarak videonun tekrar tekrar oynatılmasını sağlayabilirsiniz. parametresini kullanarak oynatıcı için JavaScript API’sını da etkinleştirebilirsiniz.

Bu sayfa, şu anda tüm yerleştirilmiş YouTube oynatıcılarında desteklenen parametrelerin tümünü tanımlamaktadır. Her bir parametre tanımı, karşılık gelen parametreyi destekleyen oynatıcıları tanımlar.


Not: Yerleşik oynatıcıların en az 200 piksele 200 piksel değerinde bir görünüme sahip olması gerekir. Oynatıcı kontrolleri gösterirse görünümün minimum boyutun altına düşürmeksizin kontrolleri tamamen gösterecek kadar geniş olması gerekir. En az 480 piksel genişlik, 270 piksel uzunluğa sahip 16:9 oynatıcıları öneririz.

Встраивание проигрывателя во фрейм

Для начала предалагаю рассмотреть пример, в котором используется рекомендованный способ добавления видео. И так, для добавления видео на страницу сделайте по порядку следующие действия:

  • Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
  • Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID).
  • Определите размеры <iframe> элемента на вашей веб-странице (атрибуты width и height). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента <iframe> является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла). Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения.

Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей. Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID). Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

  • autoplay = «1» (видео автоматически запускается).
  • loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
  • start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
  • color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Рис. 52 Добавление видео с YouTube во фрейм.

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео. Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться». После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще» и провести более расширенную настройку:

Рис. 53 Настройка фрейма на сайте YouTube.

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

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder, который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen, который позволяет перевести плеер в полноэкранный режим. Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS»

Workarounds

There is no way to stop these autoplay restrictions; however, you can mute your video to ensure autoplay is always honored. Just add one of the following parameters to the end of the player URL in your embed code:  

: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.

This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.

Important: Both of these parameters will force your video to load as muted in all browsers. Videos without audio tracks (or audio tracks without sound) will not be considered muted by browsers. In order to bypass autoplay restrictions, you must use one of the embed parameters above. 

Still having trouble in Chrome?   If your webpage has permission to autoplay but your video is still not playing, you may need to add the allow=autoplay parameter to the Vimeo iframe and any iframe in your webpage that the player is contained within. This parameter is included in our default embed code, but if you’re working in another embed application, or with multiple iframes, you may need to add it manually.    Here is an example using the Vimeo iframe:  

></iframe>   Please see Google’s Autoplay Policy for more information on the allow=autoplay parameter. 

If you are experiencing an issue, or have any questions, please contact us.

Selezione dei contenuti da riprodurre

Puoi configurare il player incorporato in modo che carichi un video, una playlist, i video caricati da un utente o i risultati della ricerca per una query specifica.

Queste opzioni sono illustrate nell’elenco di seguito:

  • Caricamento di un video

    Per un incorporamento IFrame, l’ID del video di YouTube che si desidera caricare è specificato nell’URL di IFrame.

    https://www.youtube.com/embed/VIDEO_ID

    Se utilizzi la YouTube Data API (v3), puoi creare questi URL a livello di codice recuperando gli ID dei video dai , dalle , dalle o da altre risorse ancora. Dopo aver acquisito l’ID del video, inserisci tale valore al posto del testo negli URL riportati sopra per creare l’URL del player.

  • Caricamento di una playlist

    Imposta il parametro del player su . Inoltre il parametro deve essere impostato sull’ID della play di YouTube che vuoi caricare.

    https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID

    Ricorda che è necessario anteporre le lettere all’ID della playlist, come illustrato nell’esempio seguente:

    https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6

    Se utilizzi la YouTube Data API (v3), puoi creare questi URL a livello di codice recuperando gli ID delle playlist dai , dalle o dalle . Una volta ottenuto l’ID della playlist, inserisci tale valore al posto del testo nell’URL riportato sopra.

  • Caricamento dei video caricati da un utente

    Imposta il parametro del player su . Il parametro deve inoltre essere impostato sul nome utente di YouTube a cui appartengono i video che vuoi caricare.

    https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
  • Caricamento dei risultati della ricerca per una query specifica

    Imposta il parametro del player su . Il parametro deve inoltre essere impostato sul termine della query i cui risultati di ricerca devono essere caricati dal player.

    https://www.youtube.com/embed?listType=search&list=QUERY

Umieszczanie odtwarzacza YouTube

Aby umieścić w swojej aplikacji odtwarzacz YouTube i określić jego parametry, możesz użyć dowolnej z wymienionych tu metod. Zwróć uwagę, że podane instrukcje dotyczą umieszczania odtwarzacza, w którym wczytywany jest jeden film. W sekcji poniżej wyjaśniono, jak skonfigurować odtwarzacz tak, aby ładował inne rodzaje zawartości, na przykład playlisty albo wyniki wyszukiwania.

Odtwarzacze umieszczone z użyciem elementu IFrame i korzystające z tagów

Zdefiniuj w aplikacji tag , w którym URL w parametrze będzie oznaczać materiał do wczytania. Dodatkowo ustaw pozostałe parametry odtwarzacza, które chcesz zdefiniować. Parametry i tagu określają rozmiary odtwarzacza.

Jeżeli nie korzystasz z interfejsu API IFrame odtwarzacza, tylko tworzysz element samodzielnie, to parametry odtwarzacza możesz dopisać bezpośrednio na końcu URL-a. Format adresu jest następujący:

https://www.youtube.com/embed/VIDEO_ID

Pokazany tag ładuje odtwarzacz o rozmiarach 640×360 pikseli, który odtwarza film YouTube . W URL-u parametr ma wartość , więc film zostanie odtworzony automatycznie po wczytaniu odtwarzacza.

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"/>

Embed a video

  1. On a computer, go to the YouTube video that you want to embed.
  2. Under the video, click Share .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.

If your website or app is child-directed and you embed YouTube videos, you must self designate your site and app using these tools. This self designation will ensure that Google does not serve personalised ads on these sites or apps and that some features will be disabled in the embed player.

As a reminder, the YouTube API Terms of Service and Developer Policies apply to the access and use of the YouTube embedded player. 

Создание кнопок в редакторе кнопок

В статье «» мы рассмотрели редактор кнопок.

Давайте посмотрим, как создать кнопку включения\отключения звука. Причём, кнопка должна согласованно менять своё состояние (визуально) в зависимости от проигрывания или остановки звука.

Сперва Вам необходимо нарисовать в любом графическом редакторе 4 состояния кнопки (рисунок ниже).

  1. UpNormal – звук играет, на кнопку не наведён курсор мыши.
  2. UpHighlight – звук играет, на кнопку наведён курсор мыши.
  3. DownNormal – звук не играет, на кнопку не наведён курсор мыши.
  4. DownHighlight – звук не играет, на кнопку наведён курсор мыши.

Для того, чтобы импортировать в AutoPlay Media Studio 8.2 кнопку не квадратной формы, как в примере, рекомендую использовать формат PNG (PNG-24 с прозрачностью). После того, как все изображения будут нарисованы, перейдите в AutoPlay Media Studio и в меню Tools выберите пункт Button Marker. В появившемся окне нажмите правой кнопкой мыши в ту область, в которую Вы хотите поместить изображение кнопки. Например, в область Up Normal. Из контекстного меню выберите пункт Load Image и загрузите изображение кнопки для состояния Up Normal. Проделайте это для всех остальных состояний (рисунок ниже).

Вы можете проверить результат в нижней части окна редактора кнопок. После этого сохраните кнопку в формате BTN. Просто нажмите на пиктограмму дискетки в панели инструментов в верхней части окна редактора кнопок

Обратите внимание на то, что тип кнопки должен быть Toggle. Это можно указать в свойствах кнопки в панели справа

После этого закройте редактор кнопок и разместите на странице объект Button (Кнопка) в качестве кнопки укажите на Вашем компьютере созданный файл формата BTN.

Теперь перейдите на вкладку Script, там откройте вкладку OnClick и вставьте следующий код (рисунок ниже).

В строке «kn = Button.GetState(«Button1»);» «Button1» – это имя объекта Button (Кнопка). Его можно посмотреть на вкладке Attributes в поле Objectname объекта Button(Кнопка). Если у Вас оно другое, то и в строке «kn = Button.GetState(«Button1»);» «Button1» необходимо задать другое. Вместо идентификатора «kn» может быть другое слово. Строки «Audio.SetVolume(CHANNEL_BACKGROUND, 0);» и «Audio.SetVolume(CHANNEL_BACKGROUND, 255);» указывают на то, что необходимо сделать по нажатию на кнопку. Можно задать любое другое действие. «kn == 1» и «kn == 0» указывает на состояние кнопки и влияет на её отображение. Отмечу, что данный приём, по неизвестной мне причине, не всегда срабатывает. Заметил, что кнопка не всегда меняет своё состояние и, как следствие, её состояние не определяется.

В конце данной статьи Вы сможете скачать проект Autoplay media studio 8.2 с выполнением данного урока и исходные файлы изображения кнопки.

В следующей статье «Уроки Autoplay media studio 8 (часть 2)» мы рассмотрим создание меню при помощи инструмента MenuBar и поговорим о том, как сделать нестандартную форму окна программы.

Похожие материалы

Полезные ссылки:

При скачивании файлов менеджерами загрузок возможны проблемы.
Файл Описание
Примеры проектов Примеры реализации описанных в статье приёмов

YouTube oynatıcısı yerleştirme

Uygulamanıza bir YouTube oynatıcısı yerleştirmek ve oynatıcı parametrelerini belirlemek için aşağıdaki yöntemlerden birini kullanabilirsiniz. Aşağıdaki talimatların tek video yükleyen bir oynatıcının nasıl yerleştirildiğini gösterdiğini unutmayın. Aşağıdaki bölüm, oynatıcınızı oynatma listeleri ve arama sonuçları gibi diğer içerik türlerini yükleyecek şekilde nasıl yapılandıracağınızı açıklar.

etiketleriyle IFrame yerleştirmeleri

URL’sinin oynatıcının yükleyeceği içeriklerin yanı sıra ayarlamak istediğiniz diğer oynatıcı parametrelerini belirttiği uygulamanızda bir etiketi tanımlayın. etiketinin ve parametreleri, oynatıcının boyutlarını belirtir.

öğesini kendiniz oluşturuyorsanız (IFrame Player API’sını kullanmak yerine) oynatıcı parametrelerini doğrudan URL’nin sonuna ekleyebilirsiniz. URL şu biçimdedir:

https://www.youtube.com/embed/VIDEO_ID

Aşağıdaki etiketi, YouTube videosunu oynatacak bir 640×360 piksellik oynatıcı yükler. URL parametresini olarak ayarladığından oynatıcı yüklendikten sonra video otomatik olarak oynatılır.

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"/>

IFrame Player API’sı ile IFrame yerleştirmeleri

Player API’sının JavaScript kodu yüklendikten sonra web sayfanıza veya uygulamanıza bir video oynatıcısı eklemek için uygulayın. Video oynatıcısını oluşturan ikinci parametre, oynatıcı seçeneklerini belirten bir nesnedir. Bu nesnenin içinde, özelliği oynatıcı parametrelerini tanımlar.

Aşağıdaki HTML ve JavaScript kodu, bir YouTube oynatıcısının öğesinin değerine sahip bir sayfa öğesine yerleştirildiği basit bir örneği göstermektedir. Burada belirtilen işlevi, IFrame Player API’sı kodu yüklendiğinde otomatik olarak çağrılır. Bu kod, herhangi bir oynatıcı parametresini ve diğer etkinlik işleyicileri tanımlamaz.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script');
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Sommaire

Ce document présente la procédure à suivre pour intégrer un lecteur YouTube dans votre application et définit les paramètres disponibles pour celui-ci.

En ajoutant des paramètres à l’URL iFrame, vous pouvez également personnaliser la lecture de vidéos dans votre application. Par exemple, vous pouvez automatiquement lancer la lecture de vidéos via le paramètre ou répéter la lecture d’une seule vidéo via le paramètre . Vous pouvez également activer l’API JavaScript pour le lecteur à l’aide du paramètre .

Cette page définit l’ensemble des paramètres actuellement compatibles avec les lecteurs YouTube intégrés. Chaque définition de paramètre indique les lecteurs compatibles avec le paramètre en question.

Remarque : La taille de la fenêtre d’affichage des lecteurs intégrés doit être de 200 x 200 pixels minimum. Si les commandes sont définies pour s’afficher, le lecteur doit être assez grand pour les afficher sans réduire la fenêtre d’affichage en deçà de sa taille minimale. Les dimensions recommandées des lecteurs 16:9 sont de 480 pixels de large et de 270 pixels de haut.

What Are Your Embedding Options?

Finally, we get to the embedding options since YouTube does provide these choices in order to customize the effects of the video. You can set the privacy-enhanced mode of the video, which will make sure that visitors will not be datamined by YouTube unless they click on the video. You can also set the video to play automatically if you wanted.

You can also set the time when the video will start playing, which is useful is the video is really long and you only wanted to show certain segments. Lastly, you can fiddle with the captions that come with the video by adding your own. This would make things a lot better for those who need captions to understand the context of the video.

Embed twitter widget on your website or blog to create fun and add some interaction to your website. Twitter widgets can be user timeline, search, list and favorites. Embed twitter widget on your website by signing in to your twitter account and look for the appropriate button on the settings. Twitter has millions of active users worldwide. It is the best place for marketing and advertising.

Millions of videos are being viewed on facebook everyday. Embed facebook video on your website and increase your number of followers and viewers. Engagement on embed facebook video on your website to widen your reach worldwide. Embedding facebook video is very easy. Just follow simple instructions like copy and paste and you are ready to go.

How well do you know your VLC shortcuts? Oh, don’t look too shocked – yes, there are such things as shortcuts in your VLC Player. These shortcuts enable you to have a better viewing and streaming experience. Because they’re basically ‘shortcuts’, you no longer have to look for the function list. You just have to tap into your keyboard, and there you go.

Of course, you might ask, where do you get hold of these shortcuts? You can find a complete list on the VLC Shortcuts website. Once you see that list, you’ll be amazed at the many things you can actually do on VLC.


When dealing with backlinks and youtube code embedding, there are a few things that are worth remembering most. Among them is the relevance of what you are embedding, in the first place. With there being so many reasons to actually embed YouTube videos, it isn’t surprising that people would resort to buy backlinks or other such options.

Embed a YouTube player

You can use any of the following methods to embed a YouTube player in your application and specify player parameters. Note that the instructions below demonstrate how to embed a player that loads a single video. The following section explains how to configure your player to load other types of content, such as playlists and search results.

Embed a player using an tag

Define an tag in your application in which the URL specifies the content that the player will load as well as any other player parameters you want to set. The tag’s and parameters specify the dimensions of the player.

If you create the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

https://www.youtube.com/embed/VIDEO_ID

The tag below would load a 640x360px player that would play the YouTube video . Since the URL sets the parameter to , the video would play automatically once the player has loaded.

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"></iframe>

Embed a player using the IFrame Player API

Follow the to insert a video player in your web page or application after the Player API’s JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the property identifies player parameters.

The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an value of . The function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script');
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Intégration d’un lecteur YouTube

Pour intégrer un lecteur YouTube dans votre application et spécifier ses paramètres, vous pouvez utiliser l’une des méthodes décrites ci-dessous. Sachez que ces consignes s’appliquent à l’intégration d’un lecteur pour la lecture d’une seule vidéo. La section suivante décrit comment configurer votre lecteur pour lire d’autres types de contenus, tels que des playlists et des résultats de recherche.

Intégrations iFrame à l’aide des balises

Dans votre application, utilisez une balise pour définir l’URL des contenus que le lecteur devra lire, ainsi que d’autres paramètres. Les paramètres et de la balise spécifient les dimensions du lecteur.

Si vous créez vous-même l’élément (plutôt que d’utiliser l’API iFrame Player), vous pouvez ajouter les paramètres du lecteur directement à la fin de l’URL. L’URL se présente au format suivant :

https://www.youtube.com/embed/VIDEO_ID

Dans l’exemple ci-dessous, la balise permet de charger un lecteur de 640 x 360 pixels pour la lecture de la vidéo YouTube . ­Étant donné que l’URL définit le paramètre sur , la lecture de la vidéo sera automatiquement lancée une fois le lecteur chargé.

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"/>

Intégrations iFrame à l’aide de l’API iFrame Player

Suivez les pour intégrer un lecteur vidéo sur votre page Web ou dans votre application une fois le code JavaScript de l’API Player chargé. Le deuxième paramètre devant apparaître pour l’intégration du lecteur vidéo est un objet définissant les options du lecteur. Dans cet objet, la propriété spécifie les paramètres du lecteur.

Le code HTML et JavaScript ci-dessous offre un exemple simple d’intégration d’un lecteur YouTube sur un élément de page dont la valeur est . La fonction définie dans cet exemple est automatiquement appelée lorsque le code de l’API iFrame Player a été chargé. Ce code ne définit aucun paramètre du lecteur, ni d’autres gestionnaires d’événements.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script');
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Oynatılacak içerikleri seçme

Yerleştirilmiş oynatıcınızı bir videoyu, oynatma listesini, kullanıcı tarafından yüklenen videoları veya belirli bir sorgu için arama sonuçlarını yükleyecek şekilde yapılandırabilirsiniz.

Aşağıdaki listede bu seçenekler açıklanmaktadır:

  • Video yükleme

    Bir IFrame yerleştirmesi için yüklemek istediğiniz videonun YouTube video kimliği, IFrame’in URL’sinde belirtilir.

    https://www.youtube.com/embed/VIDEO_ID

    YouTube Data API’sını (v3) kullanıyorsanız , , veya diğer kaynaklardan video kimlikleri alarak bu URL’leri program kodları yoluyla oluşturabilirsiniz. Bir video kimliği elde ettikten sonra oynatıcı URL’sini oluşturmak için yukarıdaki URL’lerde bulunan metnini bu değerle değiştirin.

  • Oynatma listesi yükleme

    oynatıcı parametresini olarak ayarlayın. Ayrıca, oynatıcı parametresini yüklemek istediğiniz YouTube oynatma listesi kimliğine ayarlayın.

    https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID

    harflerine sahip oynatma listesi kimliğini aşağıdaki örnekte gösterildiği şekilde en başa eklemeniz gerektiğini unutmayın:

    https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6

    YouTube Data API’sını (v3) kullanıyorsanız , veya oynatma listesi kimlikleri alarak bu URL’leri program kodları yoluyla oluşturabilirsiniz. Bir oynatma listesi kimliği elde ettikten sonra yukarıdaki URL’de bulunan metnini o değerle değiştirin.

  • Bir kullanıcının yüklediği videoları yükleme

    oynatıcı parametresini olarak ayarlayın. Ayrıca, oynatıcı parametresini yüklenmiş videolarını yüklemek istediğiniz YouTube kullanıcı adına ayarlayın.

    https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
  • Belirtilen bir sorgu için arama sonuçlarını yükleme

    oynatıcı parametresini olarak ayarlayın. Ayrıca, oynatıcı parametresini oynatıcının arama sonuçlarını yüklemesini istediğiniz sorgu terimine ayarlayın.

    https://www.youtube.com/embed?listType=search&list=QUERY

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

支持的参数

下面所有的参数都是可选的。

参数
此参数用于指定是否在播放器加载时自动开始播放初始视频。支持的值为 或 。默认值为 。
此参数用于指定播放器将用于显示字幕的默认语言。请将参数值设置为两个字母组成的 ISO 639-1 语言代码。如果您使用此参数且将 参数设为 ,则在播放器加载时,播放器将会以指定的语言显示字幕。如果您还未设置 参数,则默认情况下字幕将不会显示,但如果用户选择打开字幕,则字幕将会以指定的语言显示。
将参数值设置为 会使系统在默认情况下显示字幕,即使在用户此前关闭了字幕的情况下也是如此。默认行为基于用户偏好设置。
此参数用于指定在播放器的视频进度条中用来突出显示观看者已经看过的视频长度的颜色。有效的参数值包括 和 ,而且在默认情况下,播放器将在视频进度条中使用红色。如需详细了解颜色选项,请参阅 YouTube API 博客。注意:将 参数设置为 会停用 选项。
此参数用于指明视频播放器控件是否会显示:
  • — 播放器控件不会在播放器中显示。
  • (默认值)- 播放器控件会在播放器中显示。
将参数值设置为 会导致播放器无法响应键盘控制键。默认值为 ,表示支持键盘控制键。目前支持的键盘控制键如下:
  • 空格键或 键:播放/暂停
  • 向左箭头键:在当前视频中向后跳 5 秒
  • 向右箭头键:在当前视频中向前跳 5 秒
  • 向上箭头键:调高音量
  • 向下箭头键:调低音量
  • 键:切换全屏显示
  • 键:在当前视频中向后跳 10 秒
  • 键:在当前视频中向前跳 10 秒
  • 键:将视频静音或取消静音
  • 键:跳转到视频中的某一位置。 键用于跳转到视频的开头、 键用于跳转到视频的 10% 这一位置、 键用于跳转到视频的 20% 这一位置,依此类推。
将参数值设置为 则可允许通过 iframe 或 JavaScript Player API 调用来控制播放器。默认值为 ,表示无法使用这些 API 控制播放器。如需详细了解 iframe API 及其用法,请参阅 iframe API 文档(JavaScript Player API 已被弃用)。
此参数用于指定时间,以秒为单位,自视频开头开始计算,直到播放器应该停止播放视频时为止。此参数值是正整数。请注意,时间是从视频开头而不是从 播放器参数值或 参数值开始计算的;此时间在 YouTube Player API 函数中用于加载视频或将视频加入队列。
将此参数设置为 可以阻止全屏按钮显示在播放器中。默认值为 ,该值会使全屏按钮显示。
设置播放器的界面语言。此参数值是两个字母组成的 ISO 639-1 语言代码或完整表示的语言区域。例如, 和 都是有效值。系统或许也能正确处理 IETF 语言标记 (BCP 47) 之类的语言输入代码。界面语言用于播放器中的工具提示,而且还会影响默认的字幕轨道。请注意,YouTube 可能会根据特定用户的个人语言偏好设置和提供的字幕轨道,为该用户选择其他字幕轨道语言。
将参数值设置为 会在默认情况下显示视频注释,而将其设置为 则默认不显示。默认值为 。
参数与 参数搭配使用时可确定播放器中将要加载的内容。
  • 如果 参数的值为 ,则 参数值会指定搜索查询。
  • 如果 参数的值为 ,则 参数值会确定将要加载的已上传视频所在的 YouTube 频道。
  • 如果 参数的值为 ,则 参数值会指定 YouTube 播放列表 ID。在参数值中,您需要使用字母 为播放列表 ID 添加前缀,如下例所示。
    
    https://www.youtube.com/embed?    listType=playlist    &list=PLC77007E23FF423C6
注意:如果您指定 和 参数的值,则 iframe 嵌入网址就无需指定视频 ID。
参数与 参数搭配使用时可确定播放器中将要加载的内容。有效的参数值包括 、 和 。如果您指定 和 参数的值,则 iframe 嵌入网址就无需指定视频 ID。
如果播放器是单视频播放器,则将此值设置为 会使播放器反复播放初始视频。如果播放器是播放列表播放器(或自定义播放器),则会播放整个播放列表中的视频,然后再从第一个视频开始播放。支持的值为 和 ,默认值为 。注意:此参数在 AS3 播放器和 iframe 嵌入式播放器(可能会加载 AS3 或 HTML5 播放器)中得到的支持会受到限制。目前,仅在与 参数结合使用时, 参数才能在 AS3 播放器中起作用。要循环播放单个视频,请将 参数值设置为 ,并将 参数值设置为与 Player API 网址中已指定的视频 ID 相同的值:

https://www.youtube.com/v/VIDEO_ID?    version=3    &loop=1    &playlist=VIDEO_ID
此参数可让您使用不显示 YouTube 徽标的 YouTube 播放器。将参数值设置为 可以阻止 YouTube 徽标显示在控制栏中。请注意,当用户的鼠标指针悬停在播放器上方时,一个小 文字标签仍将显示在暂停的视频的右上角。
此参数为 iframe API 提供额外的安全措施,而且仅支持 iframe 嵌入式播放器。如果您使用了 iframe API,这意味着您会将 参数值设置为 ,那么您应始终将网域指定为 参数值。
此参数用于指定要播放的视频 ID 列表(以英文逗号分隔)。如果您指定一个值,则播放的第一个视频将是网址路径中指定的 对应的视频,而在 参数中指定的视频将在随后播放。
此参数用于控制视频在 iOS 设备上的 HTML5 播放器中播放时,是以内嵌方式还是全屏模式播放。有效值如下:
  • :如果使用该值,视频将以全屏模式播放。目前默认使用此值,但以后可能会变。
  • :如果使用该值,则在 属性值设置为 的情况下创建的 会以内嵌方式播放。
注意:此参数在 2018 年 9 月 25 日当天或之后。在更改前,此参数用于指示初始视频播放结束时,播放器是否应显示相关视频。
  • 如果参数值设置为 (默认值),则播放器会显示相关视频。
  • 如果参数值设置为 ,则播放器不会显示相关视频。
在更改后,您将无法停用相关视频。相反,如果 参数设置为 ,则相关视频将来自与刚播放的视频相同的频道。
注意:2018 年 9 月 25 日后,此参数已被,并会被忽略。支持的值包括: 和 。如果将参数值设置为 ,则在视频开始播放之前,播放器不会显示视频标题和上传者等信息。如果播放器正在加载播放列表,而且您已明确将该参数值设置为 ,那么播放列表加载时,播放器还将显示播放列表中视频的缩略图。
此参数可让播放器从视频中的指定位置开始播放视频,具体位置以距视频开头的秒数表示。此参数值是正整数。请注意,与 函数类似,播放器会查找与指定时间最接近的关键帧。这就意味着,播放指针有时可能会停在请求时间之前几秒的位置,通常与请求时间相差不超过 2 秒。
此参数用于标识在其中嵌入了播放器的网址。如果 YouTube 播放器嵌入到了微件中,而该微件随后嵌入到网页或应用中,则 YouTube 数据分析报告中会使用此值。在这种情况下, 参数用于标识微件提供商的网域,但 YouTube 数据分析不会将微件提供商标识为实际的流量来源。相反,YouTube 数据分析会改用 参数值以标识与流量来源关联的网域。

С этим читают