iOS 18 Safari Reader Mode: Videos and Figures

Safari’s Reader Mode in iOS 18 refines how dynamic content is displayed by prioritizing decluttered readability, stripping non-essential scripts, and enforcing strict structural rules on media. While standard native video streams are generally preserved and adapted to the Reader layout, complex interactive figures are typically flattened into static visuals, converted to textual fallbacks, or stripped entirely due to the suspension of third-party JavaScript.

Handling Embedded Video Streams

Safari Reader Mode evaluates embedded video streams based on their underlying HTML markup, source origin, and semantic relevance to the article body.

  • Native HTML5 Videos: Videos embedded using standard <video> elements located within the primary content container (such as <article>) remain functional. Reader Mode preserves the native playback controls, strips out custom web player skins, and resizes the video player to fit the Reader column width. Autoplay attributes are automatically disabled to prevent unexpected playback.
  • Third-Party iFrame Embeds: Embedded players from major video platforms like YouTube and Vimeo are retained if they are clearly identified as integral to the article. Safari isolates these iframes, stripping surrounding tracking scripts, interactive overlays, and recommended video carousels.
  • Background and Looping Videos: Ambient, decorative, or background video streams designed for aesthetic purposes are treated as non-essential clutter and are completely removed from the Reader view.

Handling Interactive Figures

Interactive data visualizations, 3D models, and dynamic diagrams face significant restrictions in Reader Mode because the engine disables the majority of page-level JavaScript to optimize performance and battery life.

  • Canvas and WebGL Elements: Figures powered by HTML5 <canvas> or WebGL APIs typically cannot execute their interactive logic. Unless the hosting site provides a pre-rendered static poster image or fallback markup, these elements will often fail to render or appear as empty containers.
  • Static Fallbacks and SVGs: Static <svg> graphics and standard <img> tags embedded within <figure> elements are preserved. If an interactive widget includes semantic <noscript> tags or static fallback imagery, Reader Mode defaults to displaying the static asset.
  • Captions and Data Tables: Reader Mode preserves the textual context of interactive graphics. Element tags such as <figcaption>, associated body paragraphs, and structured <table> markup remain visible and cleanly styled, ensuring that the informational context remains accessible even if the interactive widget is absent.

WebKit Engine Heuristics in iOS 18

The distillation algorithm in iOS 18 relies on updated WebKit heuristics and on-device intelligence to distinguish essential media from interactive distraction. If a media stream or figure requires continuous script execution, third-party authentication, or user input to provide value, Reader Mode determines it to be an application rather than an article element, filtering it out to maintain a uniform reading experience.