If you are faced with the issue of adding a video clip to the pages of your site or blog, but don’t know how to do it, then this lesson is for you! In this lesson we will look at 3 alternative ways to add video to the site, and you can choose the one that you like best.
The Internet is developing every day more and more. Today, users want to not only read texts, but also to see various graphic elements, various interactive gadgets and still watch videos directly from web pages. In many cases, this creates additional convenience for the user (for example, when he can watch the video instruction) or just makes his stay on the web resource more fun.
One way or another, whether it’s a useful video with a lesson or instruction, a demo video of a product or an entertaining video designed to brighten up a user's leisure, sooner or later there is a need to embed this video in a web page.
There are several ways to do this. Today we will consider 3 different ways that will help you cope with this task. Which one to choose is up to you. So let's go ...
How to embed a video on a site
In order to test all our examples, I will create an html-file, and also connect some styles to it. Below is the code for this file and the code for the stylesheet that is connected to the html document. You can also find all these files in the source for the lesson. I will not explain this code here, since it is quite simple, and I think that you yourself will understand it very well, however, if something is not clear, then you can always write your question in the comments, and I’ll answer it I will definitely answer.
So, the html file code:
This is just an html5 file that contains several headers. Further, under each of them we will place the corresponding code.
I also registered some styles for this page. They are stored in the “style.css” file, which lies in the same directory as the html file. The contents of the style.css file are as follows:
If we open our html file in a browser, now it will look like this:
The preparation is finished, let's move on to inserting the video onto the web page itself.
First waywhich we will consider - this is a video insert using the Youtube service.
1. The first thing we need is to have some kind of video clip that we want to insert. Let's say that we have it and it is stored on our local computer.
Now go to www.youtube.com. Here we need to click on the "Login" button located in the upper right corner. After that, you need to sign in using your Google account. If suddenly you do not have it yet, then first you need to get it.
2. After you have entered the service under your account, click on the “Add Video” button. The service will prompt you to select a file to download, and you can select the desired file, which is stored on your computer.
After you have selected the desired file, it will start loading. You need to wait a bit until it is fully loaded.
After the video has fully downloaded, you can click on its link (you can see it at the top, right after the message that the download is complete).
When you click on this link, you will see your video posted on the Youtube service.
3. Now we need to get the code to embed the video on our web page. To do this, right under the video, click on the "Share" tab, and in it on the "HTML-code" tab.
Now you can see the html code that we will need to insert. Here you can also set some other parameters, such as: the size of the video, whether to show similar videos after watching and privacy mode.
When you configure all the parameters, you can copy the code and paste it into your html-file. I will paste the code into the file under the appropriate heading as follows:
And now, if we look at the work of our html-file in the browser, we will see that the video has been inserted and can be viewed (you can see the code in action by clicking on the “Demo” icon at the beginning of the article).
Here, I think, everything is clear. Let's move on to the next method.
Insert the video using the player’s script.
You can insert a video without uploading it to any video service. If for some reason you do not want to upload a video to the service, you can use the player’s script.
So, you should have a video that you will upload. Let's say that it is stored in a folder on your site. I will save the video file in a folder named “video”.
Now we need the player itself. At the moment, there are many free players with which you can insert video on the site. Let's use the Flowplayer. This is a free web video player designed specifically for website owners.
1. Download the player files to your computer by clicking here on this link: FlowPlayer
2. After you have downloaded the player files to your computer, you need to unzip them to a folder on your site. I created the “flowplay” folder and unzipped the files there.
3. Now we will pass to the html-file and we will be engaged in a code.
If you place the file in another folder, then pay attention that the path to the file is spelled correctly.
4. Now we’ll go into the body of our file and place the player itself with the file being played. I will place it directly under the corresponding heading, after placing it in the div tag, which will align in the center.
Here you will need to check the paths to the files and register your own. When doing this, be careful.
There are also settings that prevent the video from starting automatically, but allow it to be downloaded. If you want the video to start automatically, then after the path to the “flowplayer-3.2.2.swf” file, you should remove the comma, close the parenthesis and put “,” (without quotes), and everything else that is after this and before closing tag "/ script" to remove.
Thus, if we check the page in the browser, we will see that we now have 2 videos: one is downloaded from the youtube service, and the other is stored on our website and loaded using the player.
Keep in mind that the video uploaded by the player must be in the format .mp4 or .flv.
Let's try another way and try to download the same video., which is stored on our server, but only with the new features of HTML5.
1. Find the third heading and write the following code directly below it:
If you open the page in a browser, you will see that your video has been added under the third heading. So simple! Just one line.
Be sure to check the path to the video file to match where you located it.
The controls option adds a control panel for the video.
If you want your video to play immediately after loading the page, you need to add the “autoplay” parameter.
This method meets the new html5 standards and, I think, will interest developers who want to implement future standards today.
However, there are pitfalls, for example, different browser support for different multimedia formats. This example will work great in all new browsers, but not in the Opera browser. For this code to work in Opera, we must convert the video file to the Ogg Theora format and change the code a bit to give the browser an alternative choice.
You can convert the file using the online-convert.com/ service. After conversion, save the resulting file to the “video” folder, and change the code for inserting the video to the following:
Now the example will work in the Opera browser.
However, there’s another catch regarding older browsers that don’t understand html5 tags. Unfortunately, the transition to new standards also requires the ability to find workarounds.
If a tag is unfamiliar to the browser, then it simply ignores it, but does not ignore the contents inside an element unknown to it. Therefore, we can add a workaround directly to our tag to embed a video. The code may look like this:
With this code, newer versions of browsers will successfully process our video element, and if a user suddenly opens a page using an old browser, the unfamiliar video tag will be ignored, but the iframe tag will be successfully processed and the video will be downloaded from Youtube.
Perhaps this will end. I remind you that you can download all the source materials by clicking on the "Sources" icon at the beginning of the article, and you can see the work of all three examples by clicking on the "Demo" icon in the same place.
Leave your comments and share this article with your friends using the buttons of social networks. I will be very grateful.
Also subscribe to blog updates. Ahead is a lot of interesting and useful topics on the creation of web sites.
I wish you a good mood and success in your work!