{"id":112402,"date":"2018-11-13T09:47:04","date_gmt":"2018-11-13T17:47:04","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&#038;p=112402"},"modified":"2019-09-24T10:13:54","modified_gmt":"2019-09-24T17:13:54","slug":"learn-to-use-youtube-player-parameters-in-esri-story-maps","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps","title":{"rendered":"Learn to Use YouTube Player Parameters in Esri Story Maps"},"content":{"rendered":"","protected":false},"author":651,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[],"tags":[],"arcwatch_issues":[79192],"class_list":["post-112402","arcwatch","type-arcwatch","status-publish","format-standard","hentry","arcwatch_issues-august-2016","arcwatch_sections-the-tip"],"acf":{"short_description":"Learn how to set YouTube player parameters when you embed a video in Esri Story Maps.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"It's easy to add YouTube videos to your\u00a0<a href=\"https:\/\/storymaps.arcgis.com\/en\/\">Esri Story Maps<\/a>. But if you want more control over the various YouTube player options, such as autoplay, looping, and starting the video at a specific time, you can use player parameters.\r\n\r\nYou can learn more about the basics of adding videos in these posts:\r\n<ul>\r\n \t<li><a href=\"https:\/\/blogs.esri.com\/esri\/arcgis\/2016\/06\/03\/add-youtube-videos-story-map-tour\/\">Add YouTube videos to your Story Map Tour<\/a><\/li>\r\n \t<li><a href=\"https:\/\/blogs.esri.com\/esri\/arcgis\/2016\/06\/04\/youtube-videos-story-map-journal-or-series\/\">Add YouTube videos to your Story Map Journal or Story Map Series<\/a><\/li>\r\n<\/ul>\r\nThe\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=u4X9FL0RO5w\">Life at Esri<\/a>\u00a0YouTube video was used to illustrate this tip.\r\n<h3>Use the YouTube embed code<\/h3>\r\nTo use YouTube player parameters, add the video using the video embed code instead of the standard methods described in the posts above. There are two ways to obtain the YouTube embed code: use the player embed options or start from scratch with your own code and modify it to suit your needs.\r\n<h3>To obtain the embed HTML code for your video<\/h3>\r\n<strong>Step 1.<\/strong>\u00a0Open the YouTube video you want to use, and click Share.\r\n\r\n<strong>Step 2.<\/strong>\u00a0Click Embed.\r\n\r\n<strong>Step 3.<\/strong>\u00a0Click SHOW MORE."},{"acf_fc_layout":"image","image":112462,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The embed code is displayed along with options that you can toggle off or on.\r\n\r\n<strong>Step 4.<\/strong>\u00a0Toggle the options, as desired.\r\n\r\n<strong>Step 5.<\/strong>\u00a0Copy the embed code to paste into your story map.\r\n\r\nBelow, the Show suggested videos when the video finishes check box was unchecked. This omits a display of related videos after your chosen video has finished."},{"acf_fc_layout":"image","image":112422,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>The embed code generated<\/h3>\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0\" frameborder=\"0\" width=\"560\" height=\"315\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\nNote that the parameter rel=0 is what toggles related videos off. Changing the value to 1 (the default if the parameter is omitted) will toggle related videos on.\r\n\r\nTo use a different video in the code above, replace the video ID, shown in orange below, with a different video ID. <code>https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w<\/code>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=4\">story map example<\/a>\u00a0using the code above.\r\n<h3>Create your own embed code<\/h3>\r\nIf you want to create your own embed code from scratch, all you need to do is start with the markup below, insert your video ID, and then add parameters with appropriate values, as desired. The basic code is as follows:\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/enter_video_ID\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\nReplace enter_video_ID with the ID of the video you want to use.\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=5\">story map example<\/a>\u00a0using the code above.\r\n<h3>Add YouTube embed code to your story map<\/h3>\r\nTo add a YouTube video using its embed code on the Main Stage of a Story Map Journal or Story Map Series, do the following:\r\n\r\n<strong>Step 1.<\/strong>\u00a0Choose Web page (instead of Video)\r\n\r\n<strong>Step 2.<\/strong>\u00a0Paste the code in the Embed code input box.\r\n\r\n<strong>Step 3.<\/strong>\u00a0Click Configure to choose a Position where the video will display."},{"acf_fc_layout":"image","image":112432,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"A good Position choice for video is Fit."},{"acf_fc_layout":"image","image":112442,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Note that the video dimensions are ignored when using Fit; the video will be sized automatically to fit the dimensions of the Main Stage.\r\n<h3>YouTube player parameter examples<\/h3>\r\nNot all YouTube player parameters are displayed and available from the Embed options panel. Additional parameters can be found documented at the\u00a0<a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\">YouTube Embedded Players and Player Parameters reference<\/a>. To add other parameters, check the reference for the appropriate values, then add them using &amp;, the character reference for an ampersand (\"&amp;\").\r\n\r\nBelow are common embed code player options with live examples you can view. Note that all videos were added using Position = Fit as described in step 3 above.\r\n\r\n<strong>Omit related videos<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=6\">story map example<\/a>\u00a0using the code above.\r\n\r\n<strong>Omit related videos and player controls<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0&amp;controls=0\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nNote the use of &amp;. View a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=7\">story map example<\/a>\u00a0using the code above.\r\n\r\n<strong>Autoplay and omit related videos<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0&amp;autoplay=1\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=8\">story map example<\/a>\u00a0using the code above.\r\n\r\n<strong>Start at a specific time<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0&amp;start=53\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=9\">story map example<\/a>\u00a0using the code above.\r\n\r\n<strong>Autoplay at a specific time<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0&amp;start=53&amp;autoplay=1\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=10\">story map example<\/a>\u00a0using the code above.\r\n\r\n<strong>Loop the video and omit related videos<\/strong>\r\n\r\n<pre><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/u4X9FL0RO5w?rel=0&amp;loop=1&amp;playlist=u4X9FL0RO5w\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\r\n\r\nView a\u00a0<a href=\"http:\/\/www.maps.arcgis.com\/apps\/MapJournal\/index.html?appid=4d6aed73a4d44632a70e65eebfaa3e48&amp;section=11\">story map example<\/a>\u00a0using the code above.\r\n\r\nVisit the following websites for more information:\r\n<ul>\r\n \t<li><a href=\"http:\/\/storymaps.arcgis.com\/en\/\">Esri Story Maps<\/a><\/li>\r\n \t<li><a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\">YouTube Embedded Players and Player Parameters<\/a><\/li>\r\n \t<li><a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/map-journal\/\">Story Map Journal<\/a><\/li>\r\n \t<li><a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/map-series\/\">Story Map SeriesM<\/a><\/li>\r\n<\/ul>"}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn to Use YouTube Player Parameters in Esri Story Maps<\/title>\n<meta name=\"description\" content=\"Learn how to set YouTube player parameters when you embed a video in Esri Story Maps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn to Use YouTube Player Parameters in Esri Story Maps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-24T17:13:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2019\/06\/storymapscontestbannerarcwatch-icon-wide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps\",\n\t            \"name\": \"Learn to Use YouTube Player Parameters in Esri Story Maps\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2018-11-13T17:47:04+00:00\",\n\t            \"dateModified\": \"2019-09-24T17:13:54+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"ArcWatch Articles\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Learn to Use YouTube Player Parameters in Esri Story Maps\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541\",\n\t            \"name\": \"Rick Schneblin\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"caption\": \"Rick Schneblin\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn to Use YouTube Player Parameters in Esri Story Maps","description":"Learn how to set YouTube player parameters when you embed a video in Esri Story Maps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps","og_locale":"en_US","og_type":"article","og_title":"Learn to Use YouTube Player Parameters in Esri Story Maps","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2019-09-24T17:13:54+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2019\/06\/storymapscontestbannerarcwatch-icon-wide.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps","url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps","name":"Learn to Use YouTube Player Parameters in Esri Story Maps","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2018-11-13T17:47:04+00:00","dateModified":"2019-09-24T17:13:54+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-use-youtube-player-parameters-in-esri-story-maps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"ArcWatch Articles","item":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch"},{"@type":"ListItem","position":3,"name":"Learn to Use YouTube Player Parameters in Esri Story Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541","name":"Rick Schneblin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","caption":"Rick Schneblin"},"url":""}]}},"sort_order":"2","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/112402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcwatch"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/651"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/112402\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=112402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=112402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=112402"},{"taxonomy":"arcwatch_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch_issues?post=112402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}