One big difference between the Mac and iOS is that, on the Mac, open tabs stay open (more or less1), whereas on the iPad and iPhone, switching away to another app, or even another browser tab, can mean disaster. iOS dumps all those Safari tabs, and they must reload when you return.
For partially watched YouTube videos, this means you automatically go back to the beginning. But what if there was a way to force Safari to remember your watching progress, and reload the page to the exact spot you left off? There is now! I got sick of losing my spot in videos, so I made a bookmarklet that will save your current spot in a YouTube video. Even if you reboot your iPhone or iPad, it’ll reload in the exact same spot.
What is a bookmarklet?
Bookmarklets are those little bookmarks you click to run mini “apps” in your web browser. You might have one that saves the current page to your Instapaper account, or one that launches a Google search focused only on the current site.
Bookmarklets can translate highlighted text on a page, send something to your to-do list, or pretty much anything. Today, we will use one to bookmark our place in a YouTube video.
How the YouTube bookmarker bookmarklet works
When you share a YouTube video, you can choose to share its current playback time. This is very useful. Instead of sharing an hour-long video and saying “skip to 13 minutes, 21 seconds for the good part,” you can just pause the video at that key moment and share it. Check the “current time” box in the sharing panel, and you’re done. Whoever clicks that link will see playback start at 13 minutes, 21 secconds.
My bookmarklet uses this functionality. Whenever you share a YouTube clip with a start time, it appends that time — in seconds — to the end of the url. Take a look:
Photo: Cult of Mac
If you want to watch this video (from the excellent True Cuckoo), just click this link to see it begin at 15:43.
What does the YouTube bookmarker bookmarklet do?
I wondered if it would be possible to make a bookmarklet that, when clicked, would grab the URL for the current time, and use it to reload the page at that time. Then, because the time is now part of the URL, the video is immune to reloads. You can force-quit Safari, or reboot your iPad, and when the page reloads, it loads the new URL with the time code in it.
After a lot of trial and error (mostly error), I came up with the following JavaScript code. If you drag the bookmarklet to your favorites bar in mobile Safari, you just have to tap it to bookmark the video at the current time.
javascript:void function(){ytplayer=document.getElementById("movie_player"),ytplayer.pauseVideo();void window.open("https://www.youtube.com/embed/"+document.location.search.substring(3)+"?start="+Math.floor(ytplayer.getCurrentTime()))}();
Thanks to WordPress limitations, I can’t put a JavaScript bookmarklet link here for you to drag to to your iPad’s favorites bar. You’ll have to do it the old-fashioned way, using the code above.
Once it’s there, tap it whenever you want to save your YouTube spot. A new tab will load, with the embedded version of the video, with the start time baked into the URL.
Downsides and limitations
There are limitations. One is that it loads a new tab, instead of just reloading the current tab. Another is that it uses the embedded version of the video, which prevents you from using the bookmarklet a second time. If you try, nothing happens.
This almost certainly comes down to my poor JavaScript skills. I cobbled the whole thing together from snippets found here and there on the web, and just kind of changed bits until it worked.
But for most uses, it works great. I use it quite often when watching a YouTube tutorial video. It’s fantastic to be able to just resume, without having to worry about starting where I left off.
One other point. If you are logged into your YouTube account, it’s possible that your watching progress will be saved for you automatically. I never sign into YouTube. Plus, I use a content blocker to block all Google and YouTube cookies. So I can’t say how well that works.
Help me to improve it
If you have any improvements to the code in this bookmarklet, please let me know, via email, Twitter or in the comments here on the post. I’d love to have the same page reload, with just the t=xxx part appended to the URL.
- In recent years, macOS also started to silently terminate long-unused apps and web pages, but it’s a lot less aggressive than iOS. ↩
