Script that will link YouTube videos in much the way MetaFilter does it.
April 23, 2014 10:00 AM   Subscribe

I would like to cobble together a client side script that will display YouTube links more or less like MetaFilter does - as a text link with a small "play" icon after it. Click the words you go to YouTube, click the 'play' thingus and you get an overlay.

MetaFilter's code does some sort of backend stuff that results in both links being actually written to the page - first a plain href to YouTube and then an href wrapped around the little play button.

Example.

But I want something that will take a single YouTube link and append a little play button after it, so as far as the end user experience goes it is (more or less) like MetaFilter, but in fact it is all happening via styles and JavaScript. There's only the one link. Jquery (etc) is fine. Great, even.

Yes, this is the result of inheriting a project/workflow with some pretty peculiar and rigid givens.
posted by dirtdirt to Computers & Internet (6 answers total)
 
Googling found this which uses Jquery and looks to be about halfway to what you want. You'll want to replace the button with a little image, I guess, and then write something to parse the video ID out of the youtube url.

(edit: to start, just replace 'content' with youtube embed code to try the example on the page)
posted by destructive cactus at 10:30 AM on April 23, 2014


Meta: I was a little bit confused by your "Example" link. I just saw a regular link to a youtube video.
For those as confused as me: I had to go into my mefi profile and check the "YouTube & Vimeo video inline?" box, before refreshing this question and seeing the little icon that dirtdirt is asking about.
posted by jozxyqk at 10:48 AM on April 23, 2014 [2 favorites]


Thanks, jozxyqk, I was flummoxed.
posted by Emperor SnooKloze at 12:12 PM on April 23, 2014 [1 favorite]


Best answer: Codepen I made, just for you.

Tweak the appended text within the Javascript bit. The HTML & JS are just for example. If you can put the class on there yourself, then you don't have to do the url parsing bit.

It's also not foolproof, as it'll add play buttons to non-video links on youtube.com and vimeo.com. You could do slightly more clever Regex parsing to stop that happening.

It's important to note that I'm including Fancybox and the included optional media helper, which sorts out a bunch of stuff for you automatically.
posted by Magnakai at 2:08 PM on April 23, 2014 [2 favorites]


Response by poster: That is basically perfect. A few tweaks here and there and I am in bidness! Cheers, Magnakai!
posted by dirtdirt at 6:25 AM on April 24, 2014


Updated the pen - should actually work 100% now!
posted by Magnakai at 1:40 PM on April 30, 2014


« Older Looking for a specific, recent post-apocalypse...   |   Motivation, Drive, Learning Newer »
This thread is closed to new comments.