RibbonHow to watch a video while coding on a Mac
The quickest way is Picture in Picture, which floats the video above every app. If the video needs to be bigger, put it beside your editor with macOS tiling or Split View. On a laptop screen, a scrolling window manager lets you keep the video in a narrow column next to your code and give the editor the rest.
1. Picture in Picture: a floating video
Picture in Picture (PiP) pops the video into a small window that stays on top of every app and every Space.
- Safari: on most sites, click the PiP button in the video controls. On YouTube, right-click the video twice and choose Enter Picture in Picture.
- Chrome: play the video, click the media control button in the toolbar (the music-note icon), then the Picture in Picture button. Some sites also have a PiP button in their own player.
Drag the PiP window to any corner and resize it from its edges. It's ideal for a talk you're half-listening to. It's too small for a tutorial where you need to read code on screen.
2. Split View: editor and video side by side
Hover over the green button in the video's browser window and choose the full-screen tile option for the left of the screen (on macOS 15 it's under Full Screen Tile; older versions call it Tile Window to Left of Screen), then pick your editor for the other half. Both go full screen together in their own Space. Drag the divider to give the editor more room.
The catch: Split View is its own Space, so switching to a third app takes you out of it, and only two apps fit.
3. Tiling: halves and thirds on your normal desktop
On macOS 15 Sequoia and later, Fn⌃← and Fn⌃→ put windows on the left and right halves without leaving your desktop. Rectangle adds thirds, which suit this job better: one third for the video, two thirds for the editor. The full list of shortcuts is in how to tile windows on a Mac.
Halves work well on a big monitor. On a 13- or 14-inch MacBook, half the screen is too narrow for most editors, and a third is too narrow for most videos.
4. A scrolling strip: video, code and everything else
With a scrolling window manager, every window gets its own column on a strip that's wider than the screen. Put the video in a narrow column and the editor in a wide one beside it, and both stay visible. Open the browser, terminal and docs and they go into their own columns to the right, without shrinking the video or the editor. Swipe or press a shortcut to move between them, then come back.
In Ribbon:
- Focus the video window and press ⌃⌥R until it's a third of the screen.
- Focus the editor and press ⌃⌥R until it's two thirds.
- Use ⌃⌥← / → or a three-finger swipe to visit other windows; the strip bar at the bottom shows where you are.
You can try this in the live demo in your browser before installing anything.
Which one should you use?
- Background talk or music video: Picture in Picture.
- Following a coding tutorial on a big monitor: tiling, with the video on a third or half.
- Following a tutorial on a MacBook with other windows open too: a scrolling strip.
- Just two apps and nothing else: Split View.
FAQ
How do I keep a video on top of other windows on a Mac?
Use Picture in Picture. In Safari and Chrome, the video then floats above every app and follows you across Spaces.
Why is there no Picture in Picture button on YouTube?
YouTube hides it in Safari. Right-click the video twice to get the system menu, then choose Enter Picture in Picture. In Chrome, use the media control button in the toolbar.
Can I watch a video and code on a 13-inch MacBook?
Yes. Picture in Picture works for small videos. For a tutorial you need to read, a scrolling window manager keeps the video in a narrow column and the editor beside it, which halves can't do comfortably on a small screen.