{"id":42290,"date":"2022-07-30T16:32:48","date_gmt":"2022-07-30T16:32:48","guid":{"rendered":"https:\/\/zeru.com\/blog\/?p=42290"},"modified":"2022-07-30T16:32:49","modified_gmt":"2022-07-30T16:32:49","slug":"how-to-embed-youtube-video-in-html","status":"publish","type":"post","link":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html","title":{"rendered":"How to Embed YouTube Video in HTML"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_43 counter-flat ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a0286a1bcdc4\" class=\"cssicon\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><label for=\"ez-toc-cssicon-toggle-item-6a0286a1bcdc4\"  class=\"cssiconcheckbox\">1<\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a0286a1bcdc4\" ><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\/#How_to_Embed_YouTube_Video_in_HTML\" title=\"How to Embed YouTube Video in HTML\">How to Embed YouTube Video in HTML<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\/#Embedding_YouTube_videos\" title=\"Embedding YouTube videos\">Embedding YouTube videos<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\/#Adding_an_end_time\" title=\"Adding an end time\">Adding an end time<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\/#Adding_an_object\" title=\"Adding an object\">Adding an object<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\/#Using_the_YouTube_API\" title=\"Using the YouTube API\">Using the YouTube API<\/a><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"How_to_Embed_YouTube_Video_in_HTML\"><\/span>How to Embed YouTube Video in HTML<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/p8Y3Zcc.jpg\" align=\"left\" alt=\"how to embed youtube video in html\" style=\"max-width:34% max-height:342px; margin:0px 10px; width:auto; height:auto;\">  <\/p>\n<p>If you&#8217;ve ever wanted to embed a YouTube video in your web site, you&#8217;ve probably wondered how to do so. While embedding a video directly from YouTube is a simple task, you&#8217;ll need to add a start time and end time to the video. There are several ways to do this, including using the YouTube API. Below, we&#8217;ll outline some of the most common methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Embedding_YouTube_videos\"><\/span>Embedding YouTube videos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Embedding YouTube videos into your website is easy and convenient. All you need is a notepad and a YouTube video. The embed code is simple to copy and paste, and the video will play on your site! To embed a YouTube video, simply follow these simple instructions. Here are some useful tips to embed a YouTube video:<\/p>\n<p>Embedding a video on your website has several advantages. It improves user experience, and can also help keep your site fast. When a video is uploaded to your website, it can affect the speed of the page, causing site visitors to leave the page before it loads. Embedding the video allows you to track additional analytics in Google Analytics. You can track average watch time, as well as the moment that a viewer stops watching.<\/p>\n<p>After copying the embed code from YouTube, paste it into the HTML editor of your website. The video will be embedded in an iframe. You can customize the iframe, and change the size of the video. After implementing the YouTube video embed code, you can preview the website and test whether or not it&#8217;s working correctly. To avoid a broken link or other problems, use the iframe method instead.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Adding_an_end_time\"><\/span>Adding an end time<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Adding an end time to a YouTube video can be done in several ways. You can either link the end of a video to a specific time in the URL, or you can use the embed code generator to make the time appear as an hourglass. End time links only work with videos embedded on your website. You can get the embed code generator from this page. To add an end time to a YouTube video, follow the steps below.<\/p>\n<p>First, you&#8217;ll need to determine the video&#8217;s start and end times. To do this, you&#8217;ll need to know how YouTube determines the start and end times. The start and end times can be separated by ampersands and question marks. In the example above, the videos begin at 1:07:08 and end at 1:20:57. You can also add a time stamp to the video&#8217;s URL with an id attribute.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Adding_an_object\"><\/span>Adding an object<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When you want to embed YouTube videos in your site, you can add the URL to the video and use an HTML tag to indicate where to insert the file. You should also include the controls attribute to allow website visitors to control the video, and set the video&#8217;s width and height. In addition, you can add an object to embed YouTube video in HTML. The embed element was cut from XHTML 1.0 and is part of the HTML 5 Working Draft, but it still works for many web developers.<\/p>\n<p>To embed YouTube video in HTML, you can use the IFrame API. This API loads the player from the YouTube server asynchronously. The IFrame tag&#8217;s async attribute is not supported by all browsers, but it is a standard practice. You can use the onYouTubeIframeAPIReady function to trigger the video player when it has finished downloading.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using_the_YouTube_API\"><\/span>Using the YouTube API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can use the YouTube API to embed a YouTube video in your website. Once you&#8217;ve obtained access to the YouTube API, you can access the code samples for the website. You can also use the code samples to get the list of popular videos, liked videos, and other custom request parameters. Depending on your use case, you can even customize the code samples. However, if you don&#8217;t need all of these features, you can skip the next part and just use the code samples below.<\/p>\n<p>First, you need to find an HTML code editor. Unlike the Visual tab of your HTML editor, you need to use the Text tab to input the code. In this editor, you should make sure that you use the &#8216;HTML&#8217; option instead of the &#8216;Visual&#8217; tab to display the HTML code. This is so that you don&#8217;t end up with HTML code with visual elements, which will render the video in the wrong place.<\/p>\n<p> <iframe frameborder=\"0\" width=\"466\" height=\"260\" src=\"https:\/\/www.youtube.com\/embed\/9YffrCViTVk\" allowfullscreen=\"true\" style=\"margin:0px auto; display: block;\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to Embed YouTube Video in HTML If you&#8217;ve ever wanted to embed a YouTube video in your web site, you&#8217;ve probably wondered how to do so. While embedding a video directly from YouTube is a simple task, you&#8217;ll need to add a start time and end time to the video. There are several ways [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":42772,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.7 (Yoast SEO v21.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Embed YouTube Video in HTML - Zeru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Embed YouTube Video in HTML\" \/>\n<meta property=\"og:description\" content=\"How to Embed YouTube Video in HTML If you&#8217;ve ever wanted to embed a YouTube video in your web site, you&#8217;ve probably wondered how to do so. While embedding a video directly from YouTube is a simple task, you&#8217;ll need to add a start time and end time to the video. There are several ways [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\" \/>\n<meta property=\"og:site_name\" content=\"Zeru\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-30T16:32:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-30T16:32:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/zeru.com\/blog\/wp-content\/uploads\/How-to-Embed-YouTube-Video-in-HTML_42290.png\" \/>\n\t<meta property=\"og:image:width\" content=\"703\" \/>\n\t<meta property=\"og:image:height\" content=\"425\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lizzie Yates\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lizzie Yates\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\",\"url\":\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\",\"name\":\"How to Embed YouTube Video in HTML - Zeru\",\"isPartOf\":{\"@id\":\"https:\/\/zeru.com\/blog\/#website\"},\"datePublished\":\"2022-07-30T16:32:48+00:00\",\"dateModified\":\"2022-07-30T16:32:49+00:00\",\"author\":{\"@id\":\"https:\/\/zeru.com\/blog\/#\/schema\/person\/61005d9ec00b94bc50fbaf11b78aa55e\"},\"breadcrumb\":{\"@id\":\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/zeru.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Embed YouTube Video in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/zeru.com\/blog\/#website\",\"url\":\"https:\/\/zeru.com\/blog\/\",\"name\":\"Zeru\",\"description\":\"Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/zeru.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/zeru.com\/blog\/#\/schema\/person\/61005d9ec00b94bc50fbaf11b78aa55e\",\"name\":\"Lizzie Yates\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zeru.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/zeru.com\/blog\/wp-content\/uploads\/19-150x150.jpg\",\"contentUrl\":\"https:\/\/zeru.com\/blog\/wp-content\/uploads\/19-150x150.jpg\",\"caption\":\"Lizzie Yates\"},\"description\":\"A content marketing strategist with the Zeru team for a little over 5 years, Lizzie Yates specializes in everything digital media with a particular focus on social media and technology. Her passion? To follow how the social media sites like Instagram, YouTube, Facebook, Twitter, and TikTok are maturing over time, and what businesses can do to keep up. She shares her insights on our blog in a true outpouring of knowledge and expertise. Her knowledge about technology and social media is vast, and she is always willing to share her insights with businesses to help them stay up-to-date with the latest trends.\",\"url\":\"https:\/\/zeru.com\/blog\/author\/writer\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Embed YouTube Video in HTML - Zeru","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:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html","og_locale":"en_US","og_type":"article","og_title":"How to Embed YouTube Video in HTML","og_description":"How to Embed YouTube Video in HTML If you&#8217;ve ever wanted to embed a YouTube video in your web site, you&#8217;ve probably wondered how to do so. While embedding a video directly from YouTube is a simple task, you&#8217;ll need to add a start time and end time to the video. There are several ways [&hellip;]","og_url":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html","og_site_name":"Zeru","article_published_time":"2022-07-30T16:32:48+00:00","article_modified_time":"2022-07-30T16:32:49+00:00","og_image":[{"width":703,"height":425,"url":"https:\/\/zeru.com\/blog\/wp-content\/uploads\/How-to-Embed-YouTube-Video-in-HTML_42290.png","type":"image\/png"}],"author":"Lizzie Yates","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lizzie Yates","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html","url":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html","name":"How to Embed YouTube Video in HTML - Zeru","isPartOf":{"@id":"https:\/\/zeru.com\/blog\/#website"},"datePublished":"2022-07-30T16:32:48+00:00","dateModified":"2022-07-30T16:32:49+00:00","author":{"@id":"https:\/\/zeru.com\/blog\/#\/schema\/person\/61005d9ec00b94bc50fbaf11b78aa55e"},"breadcrumb":{"@id":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zeru.com\/blog\/how-to-embed-youtube-video-in-html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zeru.com\/blog"},{"@type":"ListItem","position":2,"name":"How to Embed YouTube Video in HTML"}]},{"@type":"WebSite","@id":"https:\/\/zeru.com\/blog\/#website","url":"https:\/\/zeru.com\/blog\/","name":"Zeru","description":"Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zeru.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/zeru.com\/blog\/#\/schema\/person\/61005d9ec00b94bc50fbaf11b78aa55e","name":"Lizzie Yates","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zeru.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/zeru.com\/blog\/wp-content\/uploads\/19-150x150.jpg","contentUrl":"https:\/\/zeru.com\/blog\/wp-content\/uploads\/19-150x150.jpg","caption":"Lizzie Yates"},"description":"A content marketing strategist with the Zeru team for a little over 5 years, Lizzie Yates specializes in everything digital media with a particular focus on social media and technology. Her passion? To follow how the social media sites like Instagram, YouTube, Facebook, Twitter, and TikTok are maturing over time, and what businesses can do to keep up. She shares her insights on our blog in a true outpouring of knowledge and expertise. Her knowledge about technology and social media is vast, and she is always willing to share her insights with businesses to help them stay up-to-date with the latest trends.","url":"https:\/\/zeru.com\/blog\/author\/writer"}]}},"_links":{"self":[{"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/posts\/42290"}],"collection":[{"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/comments?post=42290"}],"version-history":[{"count":1,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/posts\/42290\/revisions"}],"predecessor-version":[{"id":42292,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/posts\/42290\/revisions\/42292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/media\/42772"}],"wp:attachment":[{"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/media?parent=42290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/categories?post=42290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeru.com\/blog\/wp-json\/wp\/v2\/tags?post=42290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}