YouTube embedding macro
May 28, 2016 at 7:42 AM by Dr. Drang
One of the things I dislike about a lot of Mac workflows written by others is that they rely on the user putting some critical information on the clipboard before the workflow is invoked. Something I dislike more is when I do the same thing, even though I know better.
I sometimes include YouTube videos here, and I like to have the embedded video centered. YouTube makes the embedding code easy to get at: click the Share button (the one with the swoopy arrow next to it), then the Embed button, and the embedding code will appear, already selected for you to copy and paste into the source code of your web site.
For the example video, the embedding code is
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/npjOSLCR2hE?showinfo=0" frameborder="0" allowfullscreen></iframe>
(The width and height may differ from one person to another, depending on preferences you set, as will other settings like “privacy-enhanced mode.” These settings can be changed by clicking the “Show More” button below the video and will persist if you’re signed in.)
Since I like to center the videos, I created a center CSS class in my style sheet and add that to the embedding code. So the code I’d embed here is
<iframe class="center" width="560" height="315" src="https://www.youtube-nocookie.com/embed/npjOSLCR2hE?showinfo=0" frameborder="0" allowfullscreen></iframe>
After doing this by hand several times, I decided to automate the process. But my first pass at the automation wasn’t very smart. It assumed I had copied the embedding code from YouTube onto the clipboard, and it simply added the class="center" part through a search-and-replace operation.
This was foolish, exactly the sort of thing that bothers me when I see it in other people’s workflows. There’s no reason to do the clicking and copying on the YouTube page. Everything in the embedding code is boilerplate except the ID string of the video itself (npjOSLCR2hE in the example), and that can be extracted from the URL of the page through AppleScript—no need for me to do any clicking or copying.
Here’s the Keyboard Maestro macro that does the work:
You can download and adjust it to fit your needs.
The first step is an AppleScript one-liner that gets the URL of the frontmost Safari document. If you use Chrome, you’ll have to change the AppleScript to something like
tell application "Google Chrome" to get the URL of active tab of front window
The URL is put into the variable YTID, and the second step does a regular expression search-and-replace to leave YTID with just the video’s ID string. In a YouTube URL, the ID string is the value of the parameter v. The macro’s second step uses a find regex of
.+[?&]v=([^&]+).*
to capture the v parameter. The URL is then replaced with just the captured ID string.
After we have the ID string, it’s a simple matter to spit out the boilerplate code with the ID string in its proper place. Because this is relatively long string, I use “Insert text by pasting” instead of “Insert text by typing.”1 This leaves the embedding code on the clipboard, which is messy, so the final step deletes it, putting the clipboard back to what it was before the macro was invoked.
Using this macro does require some preparation—the video you want to embed must be the frontmost tab of the frontmost Safari window. But this is usually the case. Even when it isn’t, a single ⌘-click on the video’s tab will put Safari in the proper state without leaving your text editor. Either way, it’s less work than clicking around in Safari and using copy/paste.
Does the macro work? Let’s see.
Update 5/28/2016 6:28 PM
Ed Cormany had a good suggestion for a more native version of the first step of the macro:
@tjluoma @drdrang @keyboardmaestro ah, i found it! not a Safari action, but it’s a global token.
— Ed Cormany (@ecormany) May 28 2016 5:14 PM
Like Ed, I had looked in Keyboard Maestro’s set of Safari actions to find one that grabbed the URL of the current Safari page but couldn’t find it. Unlike Ed, I didn’t think to look through the built-in variables. Now that I see it, though, it makes perfect sense—the frontmost URL is just a string, more appropriate for a variable than an action.
So if you’re a Safari user, as I am, you can use this for the first step instead of the AppleScript:
That’s what I’ve done on my computers, and I’ve changed the downloadable file, too. If you’re a Chrome user, there’s a similar built-in variable to get the URL of its current page.
-
I generally prefer Keyboard Maestro to insert text via simulated typing even though it’s slower, because some text fields don’t allow pasting. In this case, pasting won’t be a problem because I’ll be using the macro from within a text editor, where pasting is always allowed. ↩
