{"id":15750,"date":"2010-10-23T09:55:35","date_gmt":"2010-10-23T04:25:35","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=15750"},"modified":"2026-10-28T13:41:54","modified_gmt":"2026-10-28T08:11:54","slug":"embed-youtube-videos-in-iframes","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/","title":{"rendered":"How to Embed YouTube Videos with Iframes (Responsive, Fast, Private)"},"content":{"rendered":"<p>How do you embed YouTube videos on your website the right way? Back in 2010 YouTube switched from Flash <code>&lt;object&gt;<\/code> embed codes to the new iframe embed, which plays HTML5 video on any device. In 2026 the iframe is still the standard, but there are better ways to make embeds responsive, faster and more private. Here is how to <strong>embed YouTube videos<\/strong> with iframes, step by step.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-64010\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe-1024x538.webp\" alt=\"Embed YouTube videos in iframes\" width=\"1024\" height=\"538\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe-768x403.webp 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-youtube-videos-iframe.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> On YouTube, click <strong>Share &gt; Embed<\/strong>, choose options like start time or player controls, copy the <code>&lt;iframe&gt;<\/code> code and paste it into your page&#8217;s HTML. In WordPress, just paste the video URL on its own line. Add <code>loading=\"lazy\"<\/code>, make it responsive with CSS <code>aspect-ratio: 16 \/ 9<\/code>, and use youtube-nocookie.com for privacy-enhanced mode.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af98100d04f1\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" 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: #1a202c;color:#1a202c\" 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><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af98100d04f1\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#How_to_get_the_YouTube_embed_code\" >How to get the YouTube embed code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Make_the_YouTube_embed_responsive\" >Make the YouTube embed responsive<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Embedding_at_a_custom_size\" >Embedding at a custom size<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Useful_embed_options_URL_parameters\" >Useful embed options (URL parameters)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Privacy-enhanced_mode\" >Privacy-enhanced mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Make_embeds_load_faster\" >Make embeds load faster<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#How_to_embed_YouTube_videos_in_WordPress\" >How to embed YouTube videos in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Why_does_my_embedded_YouTube_video_say_%E2%80%9CVideo_unavailable%E2%80%9D\" >Why does my embedded YouTube video say &#8220;Video unavailable&#8221;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#How_do_I_change_the_size_of_an_embedded_YouTube_video\" >How do I change the size of an embedded YouTube video?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Can_I_embed_a_YouTube_Short\" >Can I embed a YouTube Short?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/10\/embed-youtube-videos-in-iframes\/#Does_embedding_YouTube_videos_help_SEO\" >Does embedding YouTube videos help SEO?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"How_to_get_the_YouTube_embed_code\"><\/span>How to get the YouTube embed code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Open the video on YouTube and click <strong>Share<\/strong> below it.<\/li>\n<li>Click <strong>Embed<\/strong>.<\/li>\n<li>Optional: tick <strong>Start at<\/strong> to begin at a set time, and choose whether to show player controls.<\/li>\n<li>Click <strong>Copy<\/strong>. The code looks like this:<\/li>\n<\/ol>\n<pre><code>&lt;iframe width=\"560\" height=\"315\"\n src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID\"\n title=\"YouTube video player\" frameborder=\"0\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Make_the_YouTube_embed_responsive\"><\/span>Make the YouTube embed responsive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The default 560 x 315 size does not fit phones. Add this CSS so the video fills the column and keeps its shape:<\/p>\n<pre><code>iframe[src*=\"youtube\"] {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 16 \/ 9;\n}<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Embedding_at_a_custom_size\"><\/span>Embedding at a custom size<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Need a fixed size instead, for example a small video in a sidebar? Edit the <code>width<\/code> and <code>height<\/code> in the iframe code, keeping the 16:9 ratio (divide the width by 16 and multiply by 9: 480 wide needs 270 high, 320 wide needs 180 high). In 2010 YouTube added a custom size box to its embed options so bloggers with 500px content columns didn&#8217;t have to fix the 560px code by hand every time. That box is gone, but the CSS above makes the video fit any column automatically.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Useful_embed_options_URL_parameters\"><\/span>Useful embed options (URL parameters)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><code>?start=90<\/code>: start at 1 minute 30 seconds.<\/li>\n<li><code>?autoplay=1&amp;mute=1<\/code>: autoplay only works when the video is muted in most browsers.<\/li>\n<li><code>?loop=1&amp;playlist=VIDEO_ID<\/code>: loop a single video.<\/li>\n<li><code>?rel=0<\/code>: show related videos from the same channel only (YouTube no longer lets you turn them off completely).<\/li>\n<li><code>?cc_load_policy=1<\/code>: show captions by default.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Privacy-enhanced_mode\"><\/span>Privacy-enhanced mode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Replace <code>www.youtube.com\/embed\/<\/code> with <code>www.youtube-nocookie.com\/embed\/<\/code>. YouTube then does not store viewing cookies until the visitor plays the video, which helps with privacy laws such as GDPR.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Make_embeds_load_faster\"><\/span>Make embeds load faster<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Each YouTube iframe loads around 1 MB of scripts, which slows your page. To speed it up:<\/p>\n<ul>\n<li>Add <code>loading=\"lazy\"<\/code> to the iframe so it loads only when scrolled into view, just like you <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/\">lazy load images<\/a>.<\/li>\n<li>Use a &#8220;facade&#8221; such as the open-source lite-youtube-embed, which shows a thumbnail and loads the real player only on click.<\/li>\n<li>Many WordPress caching plugins, including LiteSpeed Cache and WP Rocket, can replace YouTube iframes with a preview image automatically.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_to_embed_YouTube_videos_in_WordPress\"><\/span>How to embed YouTube videos in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Block editor:<\/strong> paste the YouTube URL into a new paragraph, or add the YouTube Embed block.<\/li>\n<li><strong>Classic editor:<\/strong> paste the URL on its own line in Visual mode, or paste the iframe code in Text mode.<\/li>\n<\/ul>\n<p>Want your embedded videos to appear in Google? See how to get <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/03\/videos-indexed-by-google\/\">videos indexed by Google<\/a>. And for more tools, see our <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2006\/10\/the-amazing-youtube-tools-collection\/\">best YouTube tools<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Why_does_my_embedded_YouTube_video_say_%E2%80%9CVideo_unavailable%E2%80%9D\"><\/span>Why does my embedded YouTube video say &#8220;Video unavailable&#8221;?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The owner may have disabled embedding, or the video is private or restricted in your country.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_change_the_size_of_an_embedded_YouTube_video\"><\/span>How do I change the size of an embedded YouTube video?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Change the width and height values in the iframe code in a 16:9 ratio, or use the responsive CSS above so it fits the content area on every screen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_embed_a_YouTube_Short\"><\/span>Can I embed a YouTube Short?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Use the video ID from the Shorts URL in a normal \/embed\/ link.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_embedding_YouTube_videos_help_SEO\"><\/span>Does embedding YouTube videos help SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Relevant videos can keep visitors longer and can show as video results when the video is the main content of the page.<\/p>\n<p>Do you embed videos on your site? Share your tips in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How do you embed YouTube videos on your website the right way? Back in 2010 YouTube switched from Flash &lt;object&gt;&#8230;<\/p>\n","protected":false},"author":4,"featured_media":64010,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-15750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/15750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=15750"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/15750\/revisions"}],"predecessor-version":[{"id":68512,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/15750\/revisions\/68512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/64010"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=15750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=15750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=15750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}