Playing YouTube video with the twitter bootstrap framework

In this tutorial, I'm going to show you how to embed YouTube video in a web page using the twitter bootstrap framework. Since we will be using bootstrap for convenient and nice looking web application. First you need to download the twitter bootstrap framework. Then after you download the twitter bootstrap, extract and copy the files such as: css, fonts and js folder. After this step, create a new folder and name it as “myvids” then paste the three files inside “myvids” folder, and put this folder in the local server. Here’s the folder structure: myvids/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff Then, let's create a new PHP file and save it as “video.php”. And add the following code: Next,inside the second class well. Add the following code: In this code, we will put DOM in a box that will hold our YouTube video and video description, and in our situation we use the panel component. Then, inside the class panel-body. Add the following code: After this the video.php file should look like as shown below. And the output should look like as shown below. As you can observe we have used different class in our code above. These are: