Skip to main content

Adding Video to Your Website

Before you add any video to your web page, it's important to understand that videos can take up a lot of web page space (file size) and bandwidth. Every time someone clicks to view the video they will be taking up some of your allocated bandwidth.

Be sure to check with your web host if you're not sure how much you are provided. If you're paying a monthly fee for web hosting, you could exceed your limits and be charged an extra fee if enough people view your video file.

Uploading the Video

First you must upload/save your video to your web server. You may want to create a folder called "video" and save it there. So the path to your video will be something like http://yoursite.com/video/movie.avi.

Embedding the Video

One thing you should keep in mind is that every web browser treats videos differently. What may work in one browser, may not work in another. So you should use both old and new HTML embed tags. (<object> and <embed>). See the sample code below:

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mpeg" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!-- Code For Older Browsers -->
<embed src="movie.mpeg" width="420" height="360"
autoplay="true"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>


* Be sure your width and height attributes match the size of your video. The variables above are just examples. You may want to add a few pixels to allow for the player controls.
* The movie.avi is the path to your movie file. You may have to edit the path if your movie is stored in a different folder. If you're not sure, use the complete path http://yoursite.com/video/movie.avi, for example.
* The controller attribute displays the video controls.
* The autoplay attribute tells the browser to play (or not play) the video when the page loads. True means it will play automatically, false means the user will need to click the Play button.
* The pluginspace tag will prompt the user to download quicktime if they do not already have it.

You'll have to modify the above HTML code slightly to fit your website's configuration.

Replace musicfile.wav with the name of the music file you chose to upload to your web server. The code above also assumes you've saved the file in the same location of your homepage (index.html). If you save the file inside a folder on your root then you'd have to change the path slightly.

Let's say you want to load the song on your homepage (page name is index.html). You save the song file to a folder called "music" located off your root/main directory. Then the code you insert in your index.html page would look like something this:

<embed src="/music/musicfile.wav" autostart="true" loop="false">

This is telling the browser to look for the song file at...
http://www.yoursite.com/music/musicfile.wav

If you're not comfortable with using relative paths in your code, then you can use the absolute (complete) path to your music file. For example, your code may look something like

<embed src="http://www.yoursite.com/music/musicfile.wav" autostart="true" loop="false" hidden="true">

Notice the full URL to the music file is listed in the code rather than starting with /music/....

Music File Attributes

After the path to your music file, you'll see a couple of attributes:

The autostart attribute tells the song file how to begin. If you have this set to "true", the song file will begin playing automatically when the page loads. If you put in "false", the sound file will not start automatically and the visitor will have to start the song by using their embedded media player.

The loop attribute tells the song how many times to play. If you have this set to "true" then it will play over and over again automatically. If you have it set to "false" it will play once and stop.

The hidden attribute tells the browser whether or not to hide the media player. It's not a good idea to leave this value at "true" unless you know for sure your visitors don't want to stop the music.

You don't want your music to annoy them to the point they leave because they can't figure out how to turn the music off.

Adjusting the Size of The Media Player

You can customize the look of the embedded/default media player on your visitor's PC by adding a width and height attribute to the code. Be careful as you adjust the size of the player because you can distort it.

<embed src="/music/musicfile.wav" autostart="true" loop="false" width="350" height="200">

Once you have your music file uploaded and coding inserted into your web page, your background music should play when your browser loads. Enjoy!

For Website Designing and Development
CSS Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.2createawebsite.com/enhance/adding-video.html

Popular posts from this blog

CSS Math Functions

  CSS Math Functions: A Simple Guide for Designers & Developers In modern CSS, math functions let you perform real calculations directly in your styles. This empowers your layouts, spacing, and responsive design with more flexibility and control. Let’s explore what CSS math functions are, why they matter, and how to use them. What Are CSS Math Functions? CSS math functions let you compute values in real time. Instead of hardcoding numbers, you can use formulas. The most commonly supported math functions are: calc() min() max() clamp() These allow mixing units (e.g., % + px ) or setting limits on values. Why Use Math Functions? Responsive design becomes easier — e.g. mix percentages and fixed px values. Dynamic spacing & sizing without needing many media queries. Constraints & boundaries — you can ensure a value stays between a minimum and maximum. Cleaner code — fewer manual adjustments. How Each Function Works + Examples 1. ca...

How CSS Sprites Work Under the Hood

When a browser loads a webpage, each image file triggers a separate HTTP request. If you have 20 icons, that’s 20 extra requests. A sprite consolidates all icons into one file , so the browser downloads just that single image once. Then, using background-position , you “shift” the visible window of that image to show the correct icon. Learn how to use CSS image sprites to enhance your website's performance Workflow in Detail Collect Icons Gather all icons you use repeatedly (social media, buttons, UI elements). Create a Sprite Sheet Use a tool like: Figma or Photoshop for manual placement. SpritePad or Glue (command line) to automate sprite sheet generation and output CSS coordinates. Calculate Positions Each icon’s top-left coordinates inside the sprite image determine its background-position . Example: if an icon starts 96 px from the left and 64 px from the top, use: .icon-example { background-position : - 96px - 64px ; } Serve Optimally Save t...

Web Accessibility

  Web Accessibility: Making the Internet Inclusive for Everyone What Is Web Accessibility? Web accessibility means designing and developing websites so that people of all abilities and disabilities can use them effectively . An accessible website ensures that users with visual, auditory, motor, or cognitive impairments can perceive, understand, navigate, and interact with its content. Why Accessibility Matters Inclusive Experience: The web should be usable by everyone, regardless of physical or cognitive abilities. Legal Compliance: Many countries enforce accessibility laws (such as the ADA in the U.S. or the RPwD Act in India). Non-compliance can lead to legal action. Better User Experience: Accessible design benefits all users, including those on mobile devices, in noisy environments, or with slow internet connections. SEO Benefits: Search engines favor well-structured, semantic content, which overlaps with accessibility best practices. Core Principles ...