Embedding a youtube video from its link in 60 seconds
This will be a basic tutorial on how to embed a youtube video, parsed from a user submitted post. This past weekend I just did this for instagram, and since that was a hacked together solution, I thought I would write a short post on the much cleaner youtube integration I implemented in Hockey Community a few months ago.
In this tutorial I will show what is needed on the javascript side of things. I’ll leave the front-end design up to you. The template will be using a fake moustache based engine. Also I’ll be using typescript and you should too!
First we want to parse the users post to find out if there is a youtube link present.
Then simply embed the youtube url into your html.
And add some style to keep the iframe responsive, you may change this as you see fit.
Here is how the finished product looks:
Give it a try on Hockey Community — a social network for hockey players. Find goalies, players, refs, leagues, tournaments, shinny, gear and anything else you need to get started playing hockey — if you don’t believe me.
If you have any suggestions for this short tutorial, or would like to see the hacky instagram version, let me know in the comments. Or if you would like to see some other short easy tutorials I think I have a few I can share. Don’t forget to clap!
