YouTube Player Demo | YouTube IFrame Player API

<!doctype html> <html lang="en" dir="ltr"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://developers.google.com/youtube/youtube_player_demo","20210506181155","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1620324715"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google Developers"> <meta property="og:type" content="website"> <meta name="theme-color" content="#ff0000"> <meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/web/20210506181155/https://developers.google.com/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20210506181155/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506181155/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506181155/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506181155/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506181155/https://www.google-analytics.com/" crossorigin> <link rel="stylesheet" href="//web.archive.org/web/20210506181155cs_/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons"> <link rel="stylesheet" href="https://web.archive.org/web/20210506181155cs_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/css/app.css"> <link rel="shortcut icon" href="https://web.archive.org/web/20210506181155im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/images/favicon.png"> <link rel="apple-touch-icon" href="https://web.archive.org/web/20210506181155im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/images/touchicon-180.png"><link rel="canonical" href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo"><link rel="search" type="application/opensearchdescription+xml" title="Google Developers" href="https://web.archive.org/web/20210506181155/https://developers.google.com/s/opensearch.xml"> <title>YouTube Player Demo  |  YouTube IFrame Player API  |  Google Developers</title> <meta property="og:title" content="YouTube Player Demo | YouTube IFrame Player API | Google Developers"> <meta property="og:url" content="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo"> <meta property="og:image" content="https://web.archive.org/web/20210506181155im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/images/opengraph/youtube-theme.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"> <meta property="og:locale" content="en"> <meta name="twitter:card" content="summary_large_image"> <script type="application/ld+json"> { "@context": "https://web.archive.org/web/20210506181155/https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "YouTube", "item": "https://web.archive.org/web/20210506181155/https://developers.google.com/youtube" },{ "@type": "ListItem", "position": 2, "name": "IFrame Player API", "item": "https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" },{ "@type": "ListItem", "position": 3, "name": "YouTube Player Demo", "item": "https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo" }] } </script> </head> <body class="" template="page" theme="youtube-theme" type="article" layout="docs" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"><devsite-header> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube"> <div class="devsite-product-logo-container" size="medium"> <img class="devsite-product-logo" alt="YouTube" src="https://web.archive.org/web/20210506181155im_/https://developers.google.com/site-assets/logo-youtube.svg" srcset="" sizes="64px" loading="lazy"> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" aria-label="Product breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="YouTube"> YouTube </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="YouTube IFrame Player API"> IFrame Player API </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search aria-expanded="false" aria-haspopup="listbox" enable-signin enable-search enable-suggestions enable-query-completion project-name="YouTube IFrame Player API" tenant-name="Google Developers" project-scope="/youtube/iframe_api_reference" url-scoped="https://developers.google.com/s/results/youtube/iframe_api_reference" role="combobox"> <form class="devsite-search-form" action="https://web.archive.org/web/20210506181155/https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-haspopup="false" aria-multiline="false" aria-label="Search box" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value=""> <div class="devsite-search-image material-icons" aria-hidden="true"></div> </div> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <devsite-select class="devsite-language-selector-menu"> <select aria-label="Select your language preference." class="devsite-language-selector-select" name="language" track-name="click" track-type="languageSelector"> <option>Language</option> <option value="en" lang="en" track-metadata-original-language="en" track-metadata-selected-language="en" track-name="changed" track-type="languageSelector"> English </option> <option value="id" lang="id" track-metadata-original-language="en" track-metadata-selected-language="id" track-name="changed" track-type="languageSelector"> Bahasa Indonesia </option> <option value="de" lang="de" track-metadata-original-language="en" track-metadata-selected-language="de" track-name="changed" track-type="languageSelector"> Deutsch </option> <option value="es" lang="es" track-metadata-original-language="en" track-metadata-selected-language="es" track-name="changed" track-type="languageSelector"> Español </option> <option value="fr" lang="fr" track-metadata-original-language="en" track-metadata-selected-language="fr" track-name="changed" track-type="languageSelector"> Français </option> <option value="it" lang="it" track-metadata-original-language="en" track-metadata-selected-language="it" track-name="changed" track-type="languageSelector"> Italiano </option> <option value="pl" lang="pl" track-metadata-original-language="en" track-metadata-selected-language="pl" track-name="changed" track-type="languageSelector"> Polski </option> <option value="pt_br" lang="pt_br" track-metadata-original-language="en" track-metadata-selected-language="pt_br" track-name="changed" track-type="languageSelector"> Português – Brasil </option> <option value="ru" lang="ru" track-metadata-original-language="en" track-metadata-selected-language="ru" track-name="changed" track-type="languageSelector"> Русский </option> <option value="zh_cn" lang="zh_cn" track-metadata-original-language="en" track-metadata-selected-language="zh_cn" track-name="changed" track-type="languageSelector"> 中文 – 简体 </option> <option value="ja" lang="ja" track-metadata-original-language="en" track-metadata-selected-language="ja" track-name="changed" track-type="languageSelector"> 日本語 </option> <option value="ko" lang="ko" track-metadata-original-language="en" track-metadata-selected-language="ko" track-name="changed" track-type="languageSelector"> 한국어 </option> </select> </devsite-select> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"></devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="reference" data-category="Site-Wide Custom Events" data-label="Tab: Reference"> Reference </a> </tab> <tab active> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="samples" aria-label="Samples, selected" data-category="Site-Wide Custom Events" data-label="Tab: Samples"> Samples </a> </tab> <tab> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/players/support" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="support" data-category="Site-Wide Custom Events" data-label="Tab: Support"> Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube"> <div class="devsite-product-logo-container" size="medium"> <img class="devsite-product-logo" alt="YouTube" src="https://web.archive.org/web/20210506181155im_/https://developers.google.com/site-assets/logo-youtube.svg" srcset="" sizes="64px" loading="lazy"> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" aria-label="Upper header breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="YouTube"> YouTube </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="YouTube IFrame Player API"> IFrame Player API </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="reference"> <span class="devsite-nav-text" tooltip> Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="samples"> <span class="devsite-nav-text" tooltip> Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/players/support" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="support"> <span class="devsite-nav-text" tooltip> Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-toc> <devsite-toc class="devsite-nav"></devsite-toc> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /youtube/css/youtube_css.css */ .noborder {border:0} .valignTop {vertical-align:top} .valignMiddle {vertical-align:middle} .noLeftPad {padding-left:0px} .noRightPad {padding-right:0px} .noTopMargin {margin-top:0px} a.plain { color:#333; text-decoration:none; } dt code { font-weight:bold; } #caution-table { border:solid 1px #999; } #caution-table td { padding:4px 10px 4px 4px; background-color:#EFEFEF; border:0; } .caution-table { border:solid 1px #999; } .caution-table td { padding:4px 10px 4px 4px; background-color:#EFEFEF; border:0; } .supported-players { color: #777; padding-left: 6px; width: 100%; } #player-demo-table { border:0; vertical-align:top; } #embedded-player-demo { border:0; vertical-align:top; } div.embedded-video { border-left: dotted 1px #555; float: right; margin-bottom: 20px; margin-left: 20px; padding: 0px 0px 12px 12px; } div.embedded-video p { font-weight: bold; text-align: center; } span.deprecated { color: red; font-weight: 400; } span.hidden-bold { color: #fff; font-weight: bold; } span.player-option-status { color: #777; font-weight: bold; } span.player-support { color: #777; font-weight: normal; } span.player-demo-group { color: #222; font-size: 120%; position: fixed; } span.player-demo-group-subheading { color: #222; font-size: 110%; padding-bottom: 10px; } .player-demo-group-options { padding-left: 100px; padding-bottom: 22px; } td.supported-method { color: green; font-weight: bold; text-align: center; } td.unsupported-method { color: red; font-weight: bold; text-align: center; } .matchpre td.error-name { width: 20%; } .matchpre td.error-reason { width: 20%; } .matchpre td.error-cause { width: 60%; } .ui-datasection-main { border: 0; } .ui-datasection-main .selector { text-align: left; padding: 0 0 15px 0; } body.docs table.borderless, body.docs table.borderless td { border: 0; padding-top: 0; } p.marginless-header { font-size: 125%; font-weight: bold; } #resource pre a { text-decoration: none; } /* Styles for getting started page: cribbed from /maps/styles/new.css */ #youtube-tool-options a:hover { text-decoration: underline; } #youtube-tool-options a, #youtube-tool-options a:visited { color: #15c; } #youtube-tool-options h2 { border-bottom: 0; } /* * Reusable styles */ #youtube-tool-options { margin-top: 20px; } /* A section card with optional image. */ #youtube-tool-options .gc-section { color: #666; line-height: 20px; font-size: 13px; margin-bottom: 0px; } #youtube-tool-options .gc-section h2 { font-size: 14px; font-weight: 600; line-height: 20px; margin-bottom: 5px; color: #1155cc; } #youtube-tool-options .gc-section-with-image { padding-left: 74px; padding-right: 8px; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #youtube-tool-options .gc-section-with-image h2 { /* Align header with section image */ margin-top: -4px; } #youtube-tool-options .gc-section-image { background: url(/web/20210506181155im_/https://developers.google.com/maps/images/sprite.png) no-repeat; width: 54px; height: 54px; position: absolute; left: 0; top: 25px; } #youtube-tool-options ul { margin-left: 15px; } #youtube-tool-options .gc-section-links { font-size: 13px; list-style-type: none; padding: 0; margin: 0; } #youtube-tool-options .gc-section-links li:before { content: "·"; color: #666; margin-right: 7px; } #youtube-tool-options .gc-section-links a { color: #666; } /* Section images */ #youtube-tool-options .gc-image-ios { background-position: 0 0; } #youtube-tool-options .gc-image-web { background-position: 0 -100px; } #youtube-tool-options .gc-image-android { background-position: 0 -200px; } #youtube-tool-options .gc-image-live { background-position: 0 -600px; } #youtube-tool-options .gc-image-blog { background-position: 0 -400px; } #youtube-tool-options .gc-image-plus { background-position: 0 -500px; } #youtube-tool-options .gc-image-academy { background-position: 0 -300px; } </style> <div class="devsite-article-meta" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail=""> Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail=""> Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="YouTube"> YouTube </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/iframe_api_reference" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="YouTube IFrame Player API"> IFrame Player API </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail=""> Samples </a> </li> </ul> <devsite-thumb-rating position="header"> <template class="thumb-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples/Code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="thumb-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </template> </devsite-thumb-rating> </div> <h1 class="devsite-page-title">YouTube Player Demo<devsite-bookmark></devsite-bookmark></h1> <devsite-toc class="devsite-nav" devsite-toc-embedded> </devsite-toc> <div class="devsite-article-body clearfix "> <p> This page demonstrates the YouTube Player API's functions. Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.</p> <devsite-iframe><iframe src="/web/20210506181155if_/https://developers.google.com/youtube/youtube_player_demo_94e37036d3d425f1c4e74538a773b4a22e6af4382c517513eb9e0cf92b4a8afe.frame" class="framebox inherit-locale " allowfullscreen is-upgraded></iframe></devsite-iframe> </div> <devsite-thumb-rating position="footer"> <template class="thumb-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples/Code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="thumb-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </template> </devsite-thumb-rating> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://web.archive.org/web/20210506181155/https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://web.archive.org/web/20210506181155/https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2020-10-09 UTC.</p> </devsite-content-footer> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20210506181155/http://apiblog.youtube.com/" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 1)"> <img class="devsite-footer-promo-icon" src="https://web.archive.org/web/20210506181155im_/https://www.gstatic.com/images/icons/material/product/2x/blogger_64dp.png" loading="lazy" alt="Blog"> Blog </a> <div class="devsite-footer-promo-description">The latest news on the YouTube API blog</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20210506181155/https://github.com/youtube/api-samples" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 2)"> <img class="devsite-footer-promo-icon" src="/web/20210506181155im_/https://developers.google.com/site-assets/logo-github.svg" loading="lazy" alt="GitHub"> GitHub </a> <div class="devsite-footer-promo-description">Find API code samples and other YouTube open-source projects.</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20210506181155/https://issuetracker.google.com/issues/new?component=186600&template=874803" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 3)"> <img class="devsite-footer-promo-icon" src="/web/20210506181155im_/https://developers.google.com/site-assets/developers_64dp.png" loading="lazy" alt="Issue Tracker"> Issue Tracker </a> <div class="devsite-footer-promo-description">Something wrong? Send us a bug report!</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20210506181155/http://stackoverflow.com/questions/ask?tags=youtube-api" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 4)"> <img class="devsite-footer-promo-icon" src="/web/20210506181155im_/https://developers.google.com/site-assets/logo-stack-overflow.svg" loading="lazy" alt="Stack Overflow"> Stack Overflow </a> <div class="devsite-footer-promo-description">Ask a question under the youtube-api tag</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20210506181155/https://www.youtube.com/user/YouTubeDev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 5)"> <img class="devsite-footer-promo-icon" src="/web/20210506181155im_/https://developers.google.com/site-assets/logo-youtube.svg" loading="lazy" alt="Videos"> Videos </a> <div class="devsite-footer-promo-description">Check out the YouTube Developer Relations team's YouTube channel</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Tools</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/apis-explorer/#p/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Google APIs Explorer </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/youtube_player_demo" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> YouTube Player Demo </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/youtube_subscribe_button" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Configure a Subscribe Button </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Issue Tracker</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20210506181155/https://issuetracker.google.com/issues/new?component=186600&template=874803" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20210506181155/https://issuetracker.google.com/issues/new?component=186600&template=874803" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Request a feature </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20210506181155/https://issuetracker.google.com/issues?q=componentid:186600" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Product Info</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Terms of Service </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/branding_guidelines" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Branding Guidelines </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/creating_monetizable_applications" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Monetization Guidelines </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506181155/https://developers.google.com/youtube/youtube-api-list" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> APIs subject to Deprecation Policy </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://web.archive.org/web/20210506181155/https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <img class="devsite-footer-sites-logo" src="https://web.archive.org/web/20210506181155im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/images/lockup-developers.svg" loading="lazy" alt="Google Developers"> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506181155/https://developer.android.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link"> Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506181155/https://developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link"> Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506181155/https://firebase.google.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link"> Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506181155/https://cloud.google.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link"> Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="/web/20210506181155/https://developers.google.com/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link"> All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/web/20210506181155/https://developers.google.com/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link"> Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//web.archive.org/web/20210506181155/https://policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link"> Privacy </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="//web.archive.org/web/20210506181155/https://services.google.com/fb/forms/googledevelopersnewsletter/?utm_medium=referral&utm_source=google-products&utm_team=googledevs&utm_campaign=201611-newsletter-launch" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link"> Subscribe </a> </li> </ul> <devsite-language-selector> <devsite-select class="devsite-language-selector-menu"> <select aria-label="Select your language preference." class="devsite-language-selector-select" name="language" track-name="click" track-type="languageSelector"> <option>Language</option> <option value="en" lang="en" track-metadata-original-language="en" track-metadata-selected-language="en" track-name="changed" track-type="languageSelector"> English </option> <option value="id" lang="id" track-metadata-original-language="en" track-metadata-selected-language="id" track-name="changed" track-type="languageSelector"> Bahasa Indonesia </option> <option value="de" lang="de" track-metadata-original-language="en" track-metadata-selected-language="de" track-name="changed" track-type="languageSelector"> Deutsch </option> <option value="es" lang="es" track-metadata-original-language="en" track-metadata-selected-language="es" track-name="changed" track-type="languageSelector"> Español </option> <option value="fr" lang="fr" track-metadata-original-language="en" track-metadata-selected-language="fr" track-name="changed" track-type="languageSelector"> Français </option> <option value="it" lang="it" track-metadata-original-language="en" track-metadata-selected-language="it" track-name="changed" track-type="languageSelector"> Italiano </option> <option value="pl" lang="pl" track-metadata-original-language="en" track-metadata-selected-language="pl" track-name="changed" track-type="languageSelector"> Polski </option> <option value="pt_br" lang="pt_br" track-metadata-original-language="en" track-metadata-selected-language="pt_br" track-name="changed" track-type="languageSelector"> Português – Brasil </option> <option value="ru" lang="ru" track-metadata-original-language="en" track-metadata-selected-language="ru" track-name="changed" track-type="languageSelector"> Русский </option> <option value="zh_cn" lang="zh_cn" track-metadata-original-language="en" track-metadata-selected-language="zh_cn" track-name="changed" track-type="languageSelector"> 中文 – 简体 </option> <option value="ja" lang="ja" track-metadata-original-language="en" track-metadata-selected-language="ja" track-name="changed" track-type="languageSelector"> 日本語 </option> <option value="ko" lang="ko" track-metadata-original-language="en" track-metadata-selected-language="ko" track-name="changed" track-type="languageSelector"> 한국어 </option> </select> </devsite-select> </devsite-language-selector> </nav> </div> </devsite-footer-utility> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics enable-analytics-iframe> <script type="application/json" analytics>[{"gaid": "UA-24532603-1", "dimensions": {"dimension3": false, "dimension4": "YouTube IFrame Player API", "dimension5": "en", "dimension11": false, "dimension1": "Signed out", "dimension8": null, "dimension6": "en"}, "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}}]</script> <script type="application/json" gtm>{"parameters": {"freeTrialEligibleUser": "False", "internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "YouTube IFrame Player API", "scriptsafe": null, "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="aWvGFia4LpkK4jDoUqfPUv+yBOogDd"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://web.archive.org/web/20210506181155/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://web.archive.org/web/20210506181155/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e","https://web.archive.org/web/20210506181155/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers","https://web.archive.org/web/20210506181155/https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://web.archive.org/web/20210506181155/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/images/video-placeholder.svg","https://web.archive.org/web/20210506181155/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/developers/images/favicon.png","https://web.archive.org/web/20210506181155/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons"],1,null,[1,6,8,12,14,17,21,25,40,45,50,63,70,75,76,80,87,88,91,92,93,97,98,100,101,102,103,105,107,108,111,112,113,115,117,118,120,122,124,125,127,129,131,132,133,134,135,136],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

YouTube Player Demo | YouTube IFrame Player API | Google Developers