Streaming is available in most browsers,
and in the WWDC app.
-
Ensuring Beautiful Rich Links
Website links received in Messages can be made vastly more inviting than a simple text URL. By providing small amounts of metadata in your web pages, links to your website can include rich content such as icons, images and even video. Learn how visitors to your website can share links that look as good as your website.
Resources
Related Videos
WWDC21
WWDC 2019
WWDC 2018
-
Download
Hi, I'm Tim Horton from the Safari and WebKit team, and today I'm going to show you how easy it is to ensure that users get beautiful, rich presentations when sharing links to your website in Messages and elsewhere on the system.
Imagine that a user of your site is reading about your latest new product, and wants to share a link to it with their friend. They'll use the Share Sheet in Safari and send it via Messages.
On the other side, their friend will see a very inviting link to tap on.
I'm going to walk you through the straightforward steps you need to take to get your link looking just as good as these. First, we'll talk about customizing the title. Then, about adding helpful icons. And then large images, to make our links really pop. Then we'll go a step beyond the links we've seen so far and add autoplaying inline video. And finally, we'll finish up with a few other resources you can use to help improve your site. So, let's jump right in by customizing the title of our link. You likely already have an HTML
tag </span></span><span class="sentence"><span data-start="69.0">in the <head> of your pages, and that will work just fine. </span></span><span class="sentence"><span data-start="74.0">There is a little bit of unnecessary duplication </span></span><span class="sentence"><span data-start="76.0">between the title and the domain, though. </span></span><span class="sentence"><span data-start="78.0">We could change the page's title, </span></span><span class="sentence"><span data-start="80.0">but in this case, we still want the window title in Safari </span></span><span class="sentence"><span data-start="82.0">to have the Apple suffix. </span></span><span class="sentence"><span data-start="85.0">So instead, we can add another tag to our page's <head>. </span></span><span class="sentence"><span data-start="89.0">This is a <meta> tag, with the name "og:title". </span></span><span class="sentence"><span data-start="93.0">The "og" there stands for "Open Graph," </span></span><span class="sentence"><span data-start="96.0">which is the standard that specifies </span></span><span class="sentence"><span data-start="97.0">the names of these tags. </span></span><span class="sentence"><span data-start="99.0">The web browser will still use the <title> tag </span></span><span class="sentence"><span data-start="101.0">for the window title, </span></span><span class="sentence"><span data-start="103.0">but the rich link will use the "og:title" instead. </span></span><span class="sentence"><span data-start="108.0">Now we have a nice title with no redundancy. </span></span><span class="sentence"><span data-start="112.0">It's best to keep titles unique and informative </span></span><span class="sentence"><span data-start="114.0">so that rich links contain at least as much context </span></span><span class="sentence"><span data-start="116.0">as the URL would have provided. </span></span><span class="sentence"><span data-start="119.0">You should also avoid </span></span><span class="sentence"><span data-start="120.0">duplicating the site name in the title, </span></span><span class="sentence"><span data-start="122.0">since the domain name is also provided </span></span><span class="sentence"><span data-start="124.0">on the second line of the link. </span></span><span class="sentence"><span data-start="126.0">It's important to keep in mind </span></span><span class="sentence"><span data-start="127.0">that JavaScript does not run when creating rich links, </span></span><span class="sentence"><span data-start="130.0">so the Open Graph tags </span></span><span class="sentence"><span data-start="132.0">need to be in the source of the page </span></span><span class="sentence"><span data-start="134.0">and cannot be generated dynamically. </span></span><span class="sentence"><span data-start="137.0">Next, we can spruce up our link a bit </span></span><span class="sentence"><span data-start="139.0">by adding an icon. </span></span><span class="sentence"><span data-start="142.0">There are many ways to specify icons, </span></span><span class="sentence"><span data-start="144.0">from favicons to Apple touch icons, </span></span><span class="sentence"><span data-start="146.0">and it's likely your site already uses one of them. </span></span><span class="sentence"><span data-start="150.0">If it doesn't, the best way to add an icon </span></span><span class="sentence"><span data-start="152.0">is by adding a "link rel equals icon" tag </span></span><span class="sentence"><span data-start="155.0">to your site's <head>. </span></span><span class="sentence"><span data-start="158.0">And this is what our link looks like now. </span></span><span class="sentence"><span data-start="160.0">For some pages, this is all you need. </span></span><span class="sentence"><span data-start="162.0">If a large hero image doesn't make sense, </span></span><span class="sentence"><span data-start="164.0">you can stop here. </span></span><span class="sentence"><span data-start="167.0">But in our case, we have a nice big image </span></span><span class="sentence"><span data-start="168.0">that is specific to this page, </span></span><span class="sentence"><span data-start="170.0">so let's continue on and make our link even nicer. </span></span><span class="sentence"><span data-start="175.0">To provide an image for a rich link, </span></span><span class="sentence"><span data-start="177.0">we can add another Open Graph meta tag to our <head> -- </span></span><span class="sentence"><span data-start="179.0">this time, "og:image". </span></span><span class="sentence"><span data-start="182.0">The content is just the URL of the image. </span></span><span class="sentence"><span data-start="186.0">Now our link looks just like the real one on apple.com! </span></span><span class="sentence"><span data-start="190.0">You may have noticed that we don't show the icon </span></span><span class="sentence"><span data-start="191.0">if we have an image. </span></span><span class="sentence"><span data-start="193.0">It's still a good idea to specify both, </span></span><span class="sentence"><span data-start="195.0">because there are times when we'll fall back to the icon -- </span></span><span class="sentence"><span data-start="198.0">for example, in cases of poor network connectivity.</p><p></span></span><span class="sentence"><span data-start="203.0">You should only use "og:image" for interesting images </span></span><span class="sentence"><span data-start="205.0">that are specific to the particular page. </span></span><span class="sentence"><span data-start="208.0">Generic fallback images -- </span></span><span class="sentence"><span data-start="209.0">like your company's logo or a user's avatar -- </span></span><span class="sentence"><span data-start="212.0">should be icons instead. </span></span><span class="sentence"><span data-start="215.0">Images should not include text. </span></span><span class="sentence"><span data-start="217.0">Rich links are presented at many sizes, across many devices. </span></span><span class="sentence"><span data-start="221.0">The same image will be shown all the way from Apple Watch </span></span><span class="sentence"><span data-start="223.0">to iPad Pro, </span></span><span class="sentence"><span data-start="224.0">and text in an image will not scale well </span></span><span class="sentence"><span data-start="226.0">across all of those. </span></span><span class="sentence"><span data-start="228.0">And as I mentioned before, you should still specify an icon </span></span><span class="sentence"><span data-start="231.0">even if you also have an image.</p><p></span></span><span class="sentence"><span data-start="234.0">Now we'll take our link a step beyond images </span></span><span class="sentence"><span data-start="237.0">and introduce an autoplaying, autolooping video. </span></span><span class="sentence"><span data-start="241.0">All that's needed for inline video </span></span><span class="sentence"><span data-start="243.0">is yet another Open Graph tag. </span></span><span class="sentence"><span data-start="246.0">This time, "og:video". </span></span><span class="sentence"><span data-start="248.0">The URL should point to a small, downloadable video file </span></span><span class="sentence"><span data-start="252.0">of any format that iOS and macOS can natively play.</p><p></span></span><span class="sentence"><span data-start="257.0">As you see, the video plays inline. </span></span><span class="sentence"><span data-start="260.0">If the video contains audio, </span></span><span class="sentence"><span data-start="261.0">it starts out muted but with the option to unmute it. </span></span><span class="sentence"><span data-start="266.0">If you can't host a video file yourself, </span></span><span class="sentence"><span data-start="268.0">you can instead point your og:video at a YouTube embed URL. </span></span><span class="sentence"><span data-start="273.0">YouTube videos won't autoplay, </span></span><span class="sentence"><span data-start="275.0">but the user can tap to play them. </span></span><span class="sentence"><span data-start="277.0">It's important to note that this is specific to YouTube; </span></span><span class="sentence"><span data-start="280.0">other embedded players will not work.</p><p></span></span><span class="sentence"><span data-start="284.0">When adding video metadata to your site, </span></span><span class="sentence"><span data-start="287.0">it's important to keep the size in mind. </span></span><span class="sentence"><span data-start="289.0">The icon, image, and video together </span></span><span class="sentence"><span data-start="292.0">are limited to 10 megabytes, </span></span><span class="sentence"><span data-start="294.0">and the smaller they are, the faster the link will appear </span></span><span class="sentence"><span data-start="296.0">and the happier your users will be. </span></span><span class="sentence"><span data-start="300.0">You should use directly referenced video files </span></span><span class="sentence"><span data-start="302.0">for the ideal autoplaying behavior. </span></span><span class="sentence"><span data-start="305.0">And like I said earlier, except for YouTube, </span></span><span class="sentence"><span data-start="307.0">embedded video that requires HTML or plug-ins </span></span><span class="sentence"><span data-start="310.0">is not supported. </span></span><span class="sentence"><span data-start="313.0">I hope you'll take this information </span></span><span class="sentence"><span data-start="314.0">and go and add Open Graph metadata to your website </span></span><span class="sentence"><span data-start="317.0">to make sure that when your users share links to it, </span></span><span class="sentence"><span data-start="319.0">they get the best possible experience. </span></span><span class="sentence"><span data-start="321.0">For more information and additional resources about </span></span><span class="sentence"><span data-start="323.0">what we've talked about, </span></span><span class="sentence"><span data-start="325.0">use the links in the Resources section </span></span><span class="sentence"><span data-start="327.0">associated with this video.</span></span></p> </section> </li> <!-- search --> <li class="supplement search active" data-supplement-id="search"> <section class="transcript-results-summary"> <p class="message smaller lighter"><!-- to be populated --></p> <p class="instructions smaller lighter text-center">Looking for something specific? Enter a topic above and jump straight to the good stuff.</p> <p class="error smaller lighter italic text-center" style="display:none;">An error occurred when submitting your query. Please check your Internet connection and try again.</p> </section> <!-- search results --> <ul class="transcript-results row"> </ul> </li> </ul> </section> </section> </section> <input id="analytics-meta" type="hidden" data-event-name="Tech Talks" data-event-id="tech-talks-205" data-session-id="205" data-video-name="Ensuring Beautiful Rich Links" data-session-response-id=""> </main> <link rel="stylesheet" href="/assets/styles/footer.dist.css?41172203193"> <footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label"> <div class="footer-content"> <h2 class="footer-label" id="footer-label">Developer Footer</h2> <developer-breadcrumbs> <li class="footer-breadcrumbs-item"><a href="/videos/">Videos</a></li> <li class="footer-breadcrumbs-item"><a href="/videos/tech-talks/">Tech Talks</a></li> <li class="footer-breadcrumbs-item">Ensuring Beautiful Rich Links</li> </developer-breadcrumbs> <nav class="footer-directory" aria-label="Apple Developer Directory" role="navigation"> <!--googleoff: all--> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform"> <h3 class="footer-directory-column-section-title">Platforms</h3> </label> <a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ios/">iOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ipados/">iPadOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/macos/">macOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/tvos/">tvOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/watchos/">watchOS</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools"> <h3 class="footer-directory-column-section-title">Tools</h3> </label> <a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift/">Swift</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swiftui/">SwiftUI</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift-playgrounds/">Swift Playgrounds</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/testflight/">TestFlight</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode/">Xcode</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode-cloud/">Xcode Cloud</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/sf-symbols/">SF Symbols</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics"> <h3 class="footer-directory-column-section-title">Topics & Technologies</h3> </label> <a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessibility/">Accessibility</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessories/">Accessories</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-extensions/">App Extensions</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/">App Store</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">Audio & Video</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/augmented-reality/">Augmented Reality</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/business/">Business</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/">Design</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/distribute/">Distribution</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/education/">Education</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">Fonts</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/games/">Games</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/health-fitness/">Health & Fitness</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/in-app-purchase/">In-App Purchase</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/localization/">Localization</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/maps/">Maps & Location</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/machine-learning/">Machine Learning</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security/">Security</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">Safari & Web</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources"> <h3 class="footer-directory-column-section-title">Resources</h3> </label> <a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">Documentation</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/learn/curriculum/">Curriculum</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">Downloads</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://developer.apple.com/forums/">Forums</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/videos/">Videos</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support"> <h3 class="footer-directory-column-section-title">Support</h3> </label> <a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/support/articles/">Support Articles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">Contact Us</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/bug-reporting/">Bug Reporting</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">System Status</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account"> <h3 class="footer-directory-column-section-title">Account</h3> </label> <a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">Certificates, IDs, & Profiles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">Feedback Assistant</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs"> <h3 class="footer-directory-column-section-title">Programs</h3> </label> <a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/">Apple Developer Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/enterprise/">Apple Developer Enterprise Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/small-business-program/">App Store Small Business Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">Security Bounty Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events"> <h3 class="footer-directory-column-section-title">Events</h3> </label> <a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/">Events Overview</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accelerator/">App Accelerators</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/awards/">Apple Design Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/learn/experts/#academies">Apple Developer Academies</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/ask-apple/">Ask Apple</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/tech-talks/">Tech Talks</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/wwdc/">WWDC</a></li> </ul> </div> </div> <!--googleon: all--> </nav> <section class="footer-mini" vocab="http://schema.org/" typeof="Organization"> <div class="footer-mini-news"> <div class="copy"> To view the latest developer news, visit <a href="/news/">News and Updates</a>. </div> <div class="content"> <div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference"> <label data-color-scheme-option="light"> <input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Light</div> </label> <label data-color-scheme-option="dark"> <input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Dark</div> </label> <label data-color-scheme-option="auto"> <input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Auto</div> </label> </div> <script async src="/assets/scripts/color-scheme-toggle.js"></script> </div> </div> <link rel="stylesheet" href="/assets/styles/language-dropdown.css?41172203193"> <div class="language-dropdown dropdown-container legacy-form hidden"> <select class="dropdown" aria-label="Language Dropdown"></select> <span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span> </div> <script src="/assets/scripts/language-dropdown.js?46182321067"></script> <div class="footer-mini-legal"> <div class="footer-mini-legal-copyright">Copyright © 2023 <a href="https://www.apple.com">Apple Inc.</a> All rights reserved.</div> <div class="footer-mini-legal-links"> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/internet-services/terms/site.html" class="first">Terms of Use</a> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/privacy/en-ww/">Privacy Policy</a> <a class="footer-mini-legal-link" href="/support/terms/">Agreements and Guidelines</a> </div> </div> </section> </div> </footer> <script src="/assets/scripts/params.js"></script> <script src="/assets/scripts/watchable.js"></script> <script src="/assets/scripts/timeout.js"></script> <script src="/videos/scripts/play/play.js?06122022"></script> <script src="/videos/scripts/hls/rtc.min.js?06122022"></script> <script src="/videos/scripts/hls/hls.min.js?06122022"></script> </body> </html>