[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":334,"topic:embedding-youtube-videos-in-html":360},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,26,30,34,38,42],{"id":9,"title":23,"slug":24,"order_index":9,"cornerstone":25,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",false,{"id":27,"title":28,"slug":29,"order_index":9,"cornerstone":25,"reading_time_minutes":27},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":25,"reading_time_minutes":27},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":25,"reading_time_minutes":27},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":25,"reading_time_minutes":27},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":25,"reading_time_minutes":27},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":27,"name":47,"slug":48,"order_index":27,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":25,"reading_time_minutes":27},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":25,"reading_time_minutes":27},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":25,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":25,"reading_time_minutes":27},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":25,"reading_time_minutes":27},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":25,"reading_time_minutes":27},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":25,"reading_time_minutes":27},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":25,"reading_time_minutes":27},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":25,"reading_time_minutes":27},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":25,"reading_time_minutes":27},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":25,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":25,"reading_time_minutes":27},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":25,"reading_time_minutes":27},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":25,"reading_time_minutes":27},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":25,"reading_time_minutes":27},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":25,"reading_time_minutes":27},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":25,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":25,"reading_time_minutes":27},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":25,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":25,"reading_time_minutes":27},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":25,"reading_time_minutes":27},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":25,"reading_time_minutes":27},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":25,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":25,"reading_time_minutes":27},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":25,"reading_time_minutes":27},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":25,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":25,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":25,"reading_time_minutes":27},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":25,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":25,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":25,"reading_time_minutes":27},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":25,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":25,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":25,"reading_time_minutes":27},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":25,"reading_time_minutes":27},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":25,"reading_time_minutes":27},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":25,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":25,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":25,"reading_time_minutes":27},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":25,"reading_time_minutes":27},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":25,"reading_time_minutes":27},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":25,"reading_time_minutes":27},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":25,"reading_time_minutes":27},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":25,"reading_time_minutes":27},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":25,"reading_time_minutes":27},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":25,"reading_time_minutes":27},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":25,"reading_time_minutes":27},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":25,"reading_time_minutes":27},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":25,"reading_time_minutes":27},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":25,"reading_time_minutes":27},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":25,"reading_time_minutes":27},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":25,"reading_time_minutes":27},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":27,"cornerstone":25,"reading_time_minutes":27},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":25,"reading_time_minutes":27},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":25,"reading_time_minutes":27},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":25,"reading_time_minutes":27},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":25,"reading_time_minutes":27},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":25,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":25,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"data":335},[336,341,345,350,355],{"name":337,"slug":338,"description":339,"post_count":27,"subcategories":340},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":342,"description":343,"post_count":27,"subcategories":344},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":346,"slug":347,"description":348,"post_count":9,"subcategories":349},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":351,"slug":352,"description":353,"post_count":9,"subcategories":354},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":356,"slug":357,"description":358,"post_count":9,"subcategories":359},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":361},{"id":255,"title":256,"slug":257,"content":362,"course":363,"subcategory":364,"author":365,"reading_time_minutes":27,"cornerstone":25,"schema_type":371,"faq_json":5,"video_url":5,"canonical_url":372,"meta_title":373,"meta_description":374,"og_image":5,"toc_json":375,"code_examples":402,"quiz":5,"exercises":414,"published_at":5,"updated_at":421,"prev":422,"next":423},"\u003Ch2 id=\"embedding-youtube-videos-in-html\">Embedding YouTube Videos in HTML\u003C\u002Fh2>\u003Cp>To \u003Cstrong>embed a YouTube video in HTML\u003C\u002Fstrong> (our focus keyword), you don't upload the video file yourself — instead you use an \u003Ccode><iframe>\u003C\u002Fcode> that loads YouTube's own player directly from YouTube's servers. This is the officially supported method and is far more efficient than self-hosting large video files, since YouTube handles all the bandwidth, adaptive streaming quality, and compatibility.\u003C\u002Fp>\u003Ch3 id=\"getting-the-embed-code\">Getting the Embed Code\u003C\u002Fh3>\u003Cp>On any YouTube video page, clicking \u003Cstrong>Share → Embed\u003C\u002Fstrong> gives you a ready-made \u003Ccode><iframe>\u003C\u002Fcode> snippet pointing to \u003Ccode>youtube.com\u002Fembed\u002FVIDEO_ID\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode><iframe width=\"560\" height=\"315\"\n  src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO_ID\"\n  title=\"YouTube video player\" frameborder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowfullscreen><\u002Fiframe>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"making-the-embed-responsive\">Making the Embed Responsive\u003C\u002Fh3>\u003Cp>By default, the iframe has a fixed pixel width and height, which breaks on mobile screens. The trending, modern technique is to wrap the iframe in a container and use the CSS \u003Ccode>aspect-ratio\u003C\u002Fcode> property (or the classic padding-hack for older browser support) so the video always maintains a 16:9 ratio at any screen width.\u003C\u002Fp>\u003Ch3 id=\"useful-youtube-embed-parameters\">Useful YouTube Embed Parameters\u003C\u002Fh3>\u003Cul>\n\u003Cli>\u003Cstrong>autoplay=1\u003C\u002Fstrong> — starts playback automatically (requires \u003Ccode>mute=1\u003C\u002Fcode> in most browsers).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>mute=1\u003C\u002Fstrong> — mutes the video, often required for autoplay to be allowed.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>controls=0\u003C\u002Fstrong> — hides YouTube's playback controls.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>start=90\u003C\u002Fstrong> — begins playback at 90 seconds.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>loop=1&playlist=VIDEO_ID\u003C\u002Fstrong> — loops the video continuously.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>rel=0\u003C\u002Fstrong> — limits related videos shown at the end to the same channel.\u003C\u002Fli>\n\u003C\u002Ful>\u003Ch3 id=\"privacy-enhanced-mode\">Privacy-Enhanced Mode\u003C\u002Fh3>\u003Cp>Using \u003Ccode>youtube-nocookie.com\u003C\u002Fcode> instead of \u003Ccode>youtube.com\u003C\u002Fcode> in the embed URL loads YouTube's privacy-enhanced player, which avoids setting tracking cookies until the user actually plays the video — a popular choice for GDPR-conscious websites.\u003C\u002Fp>\u003Ch3 id=\"performance-lazy-loading-the-iframe\">Performance: Lazy-Loading the Iframe\u003C\u002Fh3>\u003Cp>Because a full YouTube embed loads a fair amount of JavaScript even before playback starts, pages with many embedded videos can add the native \u003Ccode>loading=\"lazy\"\u003C\u002Fcode> attribute to the iframe, or defer loading it entirely until the user clicks a lightweight thumbnail placeholder — a well-known page-speed optimization technique.\u003C\u002Fp>\u003Ch3 id=\"controlling-playback-with-the-youtube-iframe-api\">Controlling Playback with the YouTube IFrame API\u003C\u002Fh3>\u003Cp>For advanced use cases (like pausing a video when the user scrolls away, or building custom play buttons), YouTube provides a JavaScript IFrame Player API that lets you control an embedded player programmatically.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!-- Responsive YouTube embed using the aspect-ratio technique -->\n<div class='video-wrapper'>\n  <iframe\n    src='https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FdQw4w9WgXcQ?rel=0'\n    title='YouTube video player'\n    frameborder='0'\n    loading='lazy'\n    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'\n    allowfullscreen>\n  <\u002Fiframe>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Keeps the embedded YouTube iframe at a perfect 16:9 ratio on any screen size *\u002F\n.video-wrapper {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \u002F 9;\n}\n\n.video-wrapper iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F\u002F Loading the YouTube IFrame API and controlling playback with JavaScript\nconst tag = document.createElement('script');\ntag.src = 'https:\u002F\u002Fwww.youtube.com\u002Fiframe_api';\ndocument.head.appendChild(tag);\n\nlet player;\nfunction onYouTubeIframeAPIReady() {\n  player = new YT.Player('player', {\n    videoId: 'dQw4w9WgXcQ',\n    events: {\n      onReady: (event) => console.log('Player ready')\n    }\n  });\n}\n\nfunction pauseVideo() {\n  player.pauseVideo();\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":10,"slug":11},{"name":231,"slug":232},{"slug":366,"display_name":367,"job_title":5,"short_bio":5,"expertise_tags":368,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":369,"posts":370},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fembedding-youtube-videos-in-html","Embed YouTube Video in HTML: iframe Guide 2026","Learn how to embed YouTube videos in HTML with iframe, make them responsive, control autoplay, and use the YouTube IFrame API with code examples.",[376],{"id":257,"text":256,"level":27,"children":377},[378,382,386,390,394,398],{"id":379,"text":380,"level":31,"children":381},"getting-the-embed-code","Getting the Embed Code",[],{"id":383,"text":384,"level":31,"children":385},"making-the-embed-responsive","Making the Embed Responsive",[],{"id":387,"text":388,"level":31,"children":389},"useful-youtube-embed-parameters","Useful YouTube Embed Parameters",[],{"id":391,"text":392,"level":31,"children":393},"privacy-enhanced-mode","Privacy-Enhanced Mode",[],{"id":395,"text":396,"level":31,"children":397},"performance-lazy-loading-the-iframe","Performance: Lazy-Loading the Iframe",[],{"id":399,"text":400,"level":31,"children":401},"controlling-playback-with-the-youtube-iframe-api","Controlling Playback with the YouTube IFrame API",[],[403,407,410],{"id":404,"language":342,"code":405,"is_editable":406},133,"\u003C!-- Responsive YouTube embed using the aspect-ratio technique -->\n\u003Cdiv class='video-wrapper'>\n  \u003Ciframe\n    src='https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FdQw4w9WgXcQ?rel=0'\n    title='YouTube video player'\n    frameborder='0'\n    loading='lazy'\n    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'\n    allowfullscreen>\n  \u003C\u002Fiframe>\n\u003C\u002Fdiv>",true,{"id":408,"language":338,"code":409,"is_editable":406},134,"\u002F* Keeps the embedded YouTube iframe at a perfect 16:9 ratio on any screen size *\u002F\n.video-wrapper {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \u002F 9;\n}\n\n.video-wrapper iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n}",{"id":411,"language":412,"code":413,"is_editable":406},135,"javascript","\u002F\u002F Loading the YouTube IFrame API and controlling playback with JavaScript\nconst tag = document.createElement('script');\ntag.src = 'https:\u002F\u002Fwww.youtube.com\u002Fiframe_api';\ndocument.head.appendChild(tag);\n\nlet player;\nfunction onYouTubeIframeAPIReady() {\n  player = new YT.Player('player', {\n    videoId: 'dQw4w9WgXcQ',\n    events: {\n      onReady: (event) => console.log('Player ready')\n    }\n  });\n}\n\nfunction pauseVideo() {\n  player.pauseVideo();\n}",[415],{"id":245,"title":416,"slug":417,"prompt":418,"starter_code":419,"expected_output":420,"language":342,"order_index":9},"Make a YouTube Embed Responsive","make-a-youtube-embed-responsive","Given a fixed-size YouTube \u003Ciframe width='560' height='315'>, wrap it in a container div and write the CSS needed so it scales responsively to 100% of its parent's width while keeping a 16:9 aspect ratio.","\u003Ciframe width='560' height='315' src='https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO_ID'>\u003C\u002Fiframe>\n\n\u003Cstyle>\n\u002F* add responsive wrapper CSS here *\u002F\n\u003C\u002Fstyle>","A .video-wrapper with position:relative; aspect-ratio:16\u002F9; and the iframe set to position:absolute; width:100%; height:100%;","2026-09-27T18:30:54+00:00",{"id":250,"slug":252,"title":251},{"id":263,"slug":265,"title":264}]