Generate Thumbnail & Copyable HTML for YouTube Videos (+$10 on delivery)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am looking for a simple implementation of the following, preferably with simple HTML and vanilla JavaScript in something like JSFiddle for simple tinkering:

  1. I submit a YouTube URL into a text field
  2. A thumbnail with the same proportions would be generated (from the added URL) 2a. I can optionally toggle on a "Play" icon for the generated image
  3. Options to download the image and/or HTML code for quickly dropping into a newsletter editor, like MailChimp's WYSIWIG editor, for example. Edit: To elaborate, pasting the copied markup would allow me to paste a YouTube URL and then paste the copied markup into the editor and it still link to the video.

For 3, the image may need to be uploaded to some 3rd party site (like Imgur) and then referenced in the HTML.

I am open to suggestions, but I think that something that does this would fit the bill!

Posting this for $10 but will tip $10 more on delivery. Thank you.

P.S. If you know of a way that you can implement it, it would be even cooler if there was a way to share YouTube URLs to this from something like Siri Shortcuts, etc. This part is NOT a requirement, but it would be nice to have. I would tip another $20 for that functionality. Thanks again.

awarded to ocanal

Crowdsource coding tasks.

3 Solutions


This site sounds like it already has what you want.

Hi, thank you, but not quite. It does generate a link, but what I'm after has more going on than that. I tried elaborating on my post.
sharper 8 months ago

Hello,

check if this is good for you:

https://gist.github.com/cereal-s/a503f634bfc1b4f468ccebdaa4e11d82

Here's the demo:

https://thatconf.works/yt.php

EDIT

I was forgetting, post a YouTube link in the long format, e.g.

https://www.youtube.com/watch?v=LQiOA7euaYA&list=RDLQiOA7euaYA&start_radio=1

because at the moment the script is seeking for the "v" argument.

Hi, I appreciate you trying with this, but it wasn't quite what I was after. Thank you though. :)
sharper 8 months ago
No problem, bye :)
cueball 8 months ago

Here is my pure javascript solution,

UPDATE:

  • Added max-width:100% for the thumbnail to handle lower width window (responsive mode)
  • Added optionals for icon (no-icon/add-play-icon)
  • Play icon URL is also changable now, you can just put icon URL from imgur or any other source.
  • When you click get HTML button or change play icon option, it will select the result of copyable HTML and copy to your clipboard automatically.

Updated Fiddle:
https://jsfiddle.net/ocanal/7q2x98cr/3/

It works any kind of url like, (regex function source)

/*
* Tested URLs:
var url = 'http://youtube.googleapis.com/v/4e_kz79tjb8?version=3';
url = 'https://www.youtube.com/watch?feature=g-vrec&v=Y1xs_xPb46M';
url = 'http://www.youtube.com/watch?feature=player_embedded&v=Ab25nviakcw#';
url = 'http://youtu.be/Ab25nviakcw';
url = 'http://www.youtube.com/watch?v=Ab25nviakcw';
url = '<iframe width="420" height="315" src="http://www.youtube.com/embed/Ab25nviakcw" frameborder="0" allowfullscreen></iframe>';
url = '<object width="420" height="315"><param name="movie" value="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
url = 'http://i1.ytimg.com/vi/Ab25nviakcw/default.jpg';
url = 'https://www.youtube.com/watch?v=BGL22PTIOAM&feature=g-all-xit';
url = 'BGL22PTIOAM';
*/
This looks most succinct; I like it a lot. Could you please make it so that on clicking the "Get HTML" button it copies the code to the clipboard & so that the Play/YouTube icon is optional? After that, I think this is wrapped! Thanks
sharper 8 months ago
Re UPDATE: Excellent!
sharper 8 months ago
View Timeline