Embedding Video
Table of Contents
Getting Some YouTube Code
We are going to keep things super simple by embedding one YouTube Video into the app code.
- Go to the
index.jadefile again in Sublime Text. Do not delete any of the existing code. - Copy and paste
iframe(width='560', height='315', src='http://www.youtube.com/embed/H7Xyboh6GpY', frameborder='0', allowfullscreen='allowfullscreen')
After the lines
//
Place embedded YouTube Code after this line
The jade tag heirchy is based on indentation. You have to make sure your newly pasted code is indented in the right place. IT MUST BE 6 SPACES FROM THE LEFT EDGE OF THE DOCUMENT.
Otherwise the express web server will complain.
It should look like this (lines 29 and 30):
If you can’t get it right, just replace all of your current index.jade file code
with the code above.
Save the code by pressing Control + S.
For Developers - Adding More YouTube Videos
YouTube gives you code to embed any video on it’s website into a webpage. I grabbed some embed code and converted it into the jade syntax with that handy HTML to Jade converter.
If you want to grab some different HTML embed code, you can get instructions on how to do this here.
After you get the HTML embed snippet, just run it through that html to jade converter.
Then paste the line into your index.jade file right after the last video code line.
Check Out Your App!
Now go to your local app http://localhost:3000/ and you should see the embedded video. If you’re app does not load you probably don’t have the node server running. Here’s how to make that happen.
- Open up your
appdirectory in the Command Window. You can go back to the directions if you need to. - Run the following commands in the Command Window:
node app