When you think about embedding video on the pages of your website, you might see yourself copying and pasting long strings of spaghetti code from one page to another. And, once you’ve posted the code, you’re seeing strange errors going off. Don’t worry, embedding video on your webpage is not like this at all. It’s actually quite simple.
With today’s broadband Internet speeds on both desktop and mobile devices, video streaming is more popular and faster than ever. For this reason, and many more, it makes sense to embed video on your webpage. Put it this way, if you’re not using video then your website may get left behind.
Hosting Options for Video Embedding
When it comes to embedding videos on your website, the way you choose to host them has a significant impact on control, customization, and performance. Let’s explore some important considerations:
Self-Hosted Videos
Putting your videos on your own server gives you complete control over the video player’s look and the user experience. This is especially beneficial for businesses looking to maintain a consistent brand identity on their websites.
Hosting videos on dedicated servers or bare metal servers is preferable to shared hosting for several reasons. Firstly, dedicated servers ensure better performance as they provide exclusive resources for your website or application. This exclusivity means that the server’s resources are not shared among multiple users, resulting in smoother video playback and improved overall performance. Additionally, dedicated and bare metal servers offer greater customization options, allowing you to tailor the server environment to meet specific video hosting requirements, implement streaming protocols, and enhance the viewer experience.
Third-Party Services
Opting to host videos on a third-party service rather than self-hosting provides several benefits. Third-party platforms like YouTube, Vimeo, or AWS offer specialized infrastructure designed for efficient video storage, delivery, and playback. One of the primary advantages is the broader reach and visibility that these platforms provide. YouTube, for instance, has a vast user base, potentially increasing the discoverability of your videos. Additionally, third-party services handle the complexities of video encoding, transcoding, and delivery, saving you the effort of managing these technical aspects.
In this tutorial, we’ll show you how to embed video from the following services:
- YouTube (free)
- The Internet archive (free)
- Amazon Web Services (AWS) (paid)
Also, if you’re embedding video into WordPress, it’s even easier to embed videos from third-party service. All you’ll need is the URL of the video.
How to Embed Video from YouTube
YouTube makes it very simple to embed videos. All you need to do is find your video and click the “Share” button to get to the embed code.
- Go to YouTube to get your video
Click the Share button- Click embed
- Copy the embed code into the code of your site
Well done! You now have the raw embed code on your website, and the video will render just as it did in the YouTube preview window.
Embed Video From YouTube to WordPress (Easiest Way)
Before we move on to the other video hosting services, we’ll stop and take a look at how the above process works much faster and easier if you’re using WordPress. With WordPress, you don’t need to get your embed code from YouTube. You can actually just copy and paste the video URL itself.
A YouTube video URL may look something like thishttps://www.youtube.com/watch?v=LRcrgXQjdG0
or this: https://youtu.be/LRcrgXQjdG0
Both of the above URLs will work the same.
- Log into your WordPress dashboard
- Create a new post or edit an existing one
- Paste the URL into the post body (main content area)
You’ll notice the URL is instantly replaced by the video. Easy.
How to Embed Video from the Internet Archive
The Internet archive is a hybrid media and preservation repository, where users may submit as much content as they want. Here, you can upload your own videos and embed them on your website. Or, you can embed content uploaded by others.
- Go to the Internet archive home page
- Search for or select a video
- Click the share button
- Paste the embed into your site
Now, the video will render on your page with the all the video controls necessary to play properly.
How to Embed Video from Amazon Web Services (AWS)
As mentioned above, hosting your own video on a dedicated server is best. But if a dedicated server is out of your budget, you can make use of Amazon’s infrastructure to host your videos. Basically, using AWS, we’re going to create an S3 bucket that acts as a sort hard drive in the cloud where we can store our videos publicly.
Create an S3 Bucket For Storing Video
- Log into AWS using your Amazon account
- Click the Services dropdown
- Under Storage click S3
- Click Create bucket
- Name your bucket and select a region
- Click Next to select default configure options
- Uncheck Block all public access and click Next
- Click Create Bucket after going through options
- Select your new bucket to add contents
- Click Upload to upload a video
- Drag video files into window or click Add files to select the video from your computer
- Click Upload on the upload screen
- Select the video after the upload completes
- Select Permissions tab from the top
- Scroll down to the public access section and click the radio button for “Everyone”
- Check the box for Read object and click Save
Congratulations! You just uploaded your video and made it publicly available to the web through AWS. In the section below, we’re going to use the object URL to embed the video on a page of your website.
Use HTML5 Video Tag to Embed the Video
The HTML5 standard introduced a new video tag to allow developers to easily drop a video into any HTML page. First, make sure to grab the URL for your video by click the “Object URL” link in AWS. In order to use the video tag, use a code snippet like this instead of the embed codes we used earlier:
<video width="320" height="240" controls>
<source src="paste-the-object-url-here-between-the-quotes" type="video/mp4">
</video>
That’s it! That’s all you need to know to embed videos on your webpages. Be sure to leave a comment below if you have any trouble with these steps.
I want add full movies to my website.. Can anyone help me how do it, because when i add it it does not show in my website. Please help me.
What kind of error are you receiving? Some video hosting services like the Internet Archive and YouTube provide an “embed” code that you can use with a simple copy and paste.
I have a question – I am looking to embed a video that I made (.wmv format – approx 16 seconds in length) into my website. What I’m looking for it to do is when a person clicks on a video camera hyperlink on my main page, I want the page to of course open up to my “videos for sale” page and when that page opens, I want my embedded video to automatically play, full screen, kind of like as a ‘grand introduction and welcome’ to the “videos for sale” page. How can I do that? I did copy and paste the code above onto my site, but Internet Explorer blocks it, saying it might be dangerous content, which of course I can override by clicking on the “allow this content” button, but I don’t want my site visitors to have to click on anything to get it to play. And Chrome says they don’t support the plugin to play the .wmv file. Any ideas?
How are you building your website? The methods outlined in this article are only a few ways that you can embed video on a website, but it may not work for all websites. Again, it depends on the software you are using to build your website. As far as the additional custom behaviors you want to occur, you will need to find a software for your website or find a developer to code that particular behavior. That may be a better method since these methods now are displaying errors and require additional components to install to view in certain browsers.
i want to create a site. where people can upload their videos and i also can upload.
i tried vidmy it not working.. do you know of any site i can use..
CumulusClips appears to be an option that includes the features for video uploads that you are looking for.
i dont really get when you say embed a video in a web site.because i have been trying to insert a video in my site to no avail
Did you follow the steps above? Were you getting a specific error message? Any additional information you can provide would be greatly appreciated.
Hi,
Im currently getting our company website re-designed and i want to add a video to the front of the website so that it automatically plays before you even enter the website.
1. is this possible?
2. how would i do it?
thank you in advance
Dan
You can add a video to your “home” or index page, then set it to auto load. Here is a possible solution I found via google search .
Thank you,
John-Paul
I have use the Codes here and I can not the Video to Play at All I am using windows 10
can you help i am using the WVM format and the mp4 format
Make sure to update the URL from “video.wmv” to the file path on the server where your video resides.
Hiee,
I want to put one video that is of mp4 but m not knowing how to put that video.I also used this code
<embed src=”file.mp4″ width=”700″ height=”480″ loop=”true” pluginspage=”www.apple.com/quicktime” border=”3″ autoplay=”false”></embed>
but nothing is working…one small black screen comes…please tell me how to solve this…..i want to submit my website as soon as possible
We need to see the actual page. Do you have a URL we can see the error ourselves?
Hi,
I am new to html, i have copied the below code that you have provided into my html page and have changed the “value” fields as per below. I have also placed the video in a sub folder, yet, the video is not playing on my page. can you please advise.
Make sure that the video URL points to your subfolder. For example, /subfolder/video.wmv.
Hello Jock,
Sorry for the problem – this is unfortunately a question that you need to ask of a developer. We can probably reference websites that might be similar, but truthfully, they would need to be reviewed to see if they match the criteria you’re saying or not. This is not a simple project, and may require more than a volunteer professional to complete it. It is beyond the scope of this article which is simply to embedding video into webpages. Apologies that we cannot answer your question. If you another question related to this particular article then we would be happy to answer. If you have a question that is not part of this category, please submit it as a question in this section of our support center website.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Hi,
I am facing problem with video with Enternet explorer hoever it is fine on Crome.
Please see the link- http://nirmaaninfra.com/demo
It is running fine on Crome howevr When I am entering the site on different browser its not playing.
Would request you to please help me in this case.
My Email id is [email protected]
Many Thanks,
The video is loading well in my Firefox browser after taking a few seconds to load. Which video format are you using? You might see some buffering issues with high definition video depending on multiple factors.
For me the ideal solution is to use the player Vynch. With this technology you can embedded in your own website a room with video that you can watch synchronized. You can create playlist and share with friends and user! there is also a chat to exchange your impressions..
Hi, I wish to display 14 different videos on my page. They are stored on my computer I am using WAMPserver and Localhost. My videos are stored in a folder Tna/Videos and are in wmv format, I was able to use you code above to play one of the videos, I had to save it as a html file and run it independently, it opened in a seperate window, although it wasnt embedded. I changed the values of your code although I dont know what each of them mean. Here is my code
<object width=”100%” height=”100%”
type=”video/x-ms-asf” url=”/Tna/eNISAT/LoginTutorial.wmv” data=”/Tna/eNISAT/LoginTutorial.wmv”
classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″>
<param name=”url” value=”/Tna/eNISAT/LoginTutorial.wmv”>
<param name=”filename” value=”/Tna/eNISAT/LoginTutorial.wmv”>
<param name=”autostart” value=”1″>
<param name=”uiMode” value=”full” />
<param name=”autosize” value=”1″>
<param name=”playcount” value=”1″>
<embed type=”application/x-mplayer2″ src=”/Tna/eNISAT/LoginTutorial.wmv” width=”100%” height=”100%” autostart=”true” showcontrols=”true” pluginspage=”https://www.microsoft.com/Windows/MediaPlayer/”></embed>
</object>
My question is how can I display 14 of these, obe for each video and make them embedded.
Thanks
Stephen
Hello Stephen,
I was able to take the code from the tutorial, as well as the code you provided and get it to work fine. I only changed the video path/name to match that of my server. The videos were all embedded and did not open in different pages. I did not test 14, but did test 5 at once. Inserting nine more should act the same. I did not see any errors in the way they behaved. If you can provide a link to one that is not behaving, I may be able to take a quick look.
Kindest Regards,
Scott M
Great post. i like it. feeling great when reading your post.
how to embed avi file in html page?
Hello Zia,
I would suggest converting the file to MP4 as that file accepted by default n HTML without major work arounds and the file size is generally smaller. However I did find a tutorial on how to do embed AVI in HTML.
Best Regards,
TJ Edens
pls its is complicated i need more light on how to upload a playing video on my site
Hello ife,
I’m not quite sure where you are stuck. The article goes over how to upload and then embed the video. What part are you needing assistance with?
Kindest Regards
Scott M
Hi John-Paul I did convert to MP4 and embed the video in the webpage. But it still doesn’t show in Chrome or Safari. Can you test ? https://www.strp.ca/STRP_Staff.htm
Hello Lori,
The browser is trying to use QuickTime to run the video. Chrome does not support QuickTime. Have you tried converting to avi format?
Kindest Regards,
Scott M
Hi John-Paul I converted the file to MP4 and used the In Motion code to run. Can you check https://www.strp.ca/STRP_Staff.htm I still have an issue in Chrome. Any more ideas ?
Hi John-Paul
Here is the page https://www.strp.ca/STRP_Staff.htm. I volunteer for the organization. I noticed after I posted on In Motion that it was working in IE. However it takes about 15 seconds to load. It doesn’t run in Chrome or Safari. I don’t have Fire Fox. All help is appreciated ! I realize the entire site needs an overhaul, but I am trying to keep running costs to a minimum for them.
Thank you
Lori Ann
Hello Lori,
Thank you for contacting us. Yes, this issue seems related to the video file format being wmv. The easiest option may be to convert it to mp4 as suggested previously.
There are many free tools available for converting wmv files, such as Convert video to MP4.
This should allow your file to be played on most browsers.
If you have any further questions, feel free to post them below.
Thank you,
John-Paul
I have the wmv code inserted and it plays in the preview pane of my software builder. But when browsing the file on the web I get an error the plug in is not supported. I ftp the updates to the web.
Hello Lori,
Thank you for contacting us. WMV files have known compatibility issues on some browsers, such as Chrome Browser. This may be related to your issue. Converting the format to something more popular such as .mp4 may correct your problem.
We are happy to help you troubleshoot further, but will need some additional information. Can you provide a link to the site, so I can test?
Have you tried on other browsers, such as FireFox, Safari, IE, etc.
Thank you,
John-Paul
I used the first embed code for Adobe Flash and it works perfectly! What code can I insert to play automatically and loop the video?
Hello Tracy,
If you are using the embed HTML code then you should just need to add the loop=”True” section such as the example below:
<EMBED SRC=”YourDomain/sample.mp3″ LOOP=TRUE>
Best Regards,
TJ Edens
MP4 and webm videos are4 not running on my page .please tell me what i have to do now.Please tell me how can i do this ?
Fawad,
You need to supply us more information about your website before we can help with this issue. If you’re hosting your site with InMotion, then please provide a URL and specific page information where you’re having the problem. Otherwise, if you follow the directions in the article above, you will be able to play the files directly from the website. The files typically need a player if you’re to play them directly from a website. You can also upload the files into a player like Youtube or Vimeo, then get the code and apply to your website.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Thanks for the answer : a trick to circumvent the black screen would be to display a still image that would launch the video when clicking. Is there a possibility to launch the video using Javascript/swfobject.js for example ? I’ve crawled the web without findind a method that fits this good script. Thanks anyway !
Found the information I was looking for, well explained, useful feedback from the community. Thanks
Good morning,
the Video Embed with mediaplayer.swf (Flash) just displays a black screen until the person presses play. Is there a possibility to show a still image of the actual video or define an image to be displayed before the person presses play ?
Thanks in advance.
Unfortunately, I am unaware of a solution for this. Also, I highly recommend using a service such as YouTube or Vimeo as there will be additional options there to add a custom thumbnail and typically serves up videos faster.
I was searching for the right code in HTML 4, but your answer was SPOT ON! Thanks!!
Thanks – this is precisely the information that was missing. It removes one of the variables when troubleshooting a video that does not play – by knowing the video is in the proper place in the directory structure.
Video Embed .mp4 files (Apple Quicktime)
“Your .mp4 video will need to be uploaded to the server in order for you to link to it.”
Which directory? The upload location of the file in the directions is curiously absent.
Hello Steve,
The directory is absent because there is no specific directory to upload it to. Each person designs their site in different ways. Many may have a specific folder to upload the videos to, some will not. Maybe they put all videos in one folder, maybe they organize the content differently. It is a lot like a closet, each person has their own way of storing things. As long as it in the house (root directory of the site), then whichever room or closet it is stored in is up to you.
Do know, however, that if you have it in a subfolder you will need to add that to the source path. For example, if the video is in your main root, it would appear as in the example:
Whereas if it was in a subfolder named ‘videos’ then you need to specify that in the path:
Kindest Regards,
Scott M
The mediaplayer.swf is giving me errors on my mp4 file. Says its an unsupport video format. Maybe its not the latest version?
The MP4 container can contain various different video encoding methods in which it could potentially be unsupported as this is a bit of an older method to embed files. You may have better luck using a service such as Vimeo or Youtube for embedding your videos.