FAQ / Help pages - Using Photos, Videos and Images on your Website or Blog
How can I add an animated image or video to my website or blog?
You can use files downloaded from Glitterboo just the same way you use any other image files on your website or blog.
Although we provide upload buttons for hosting on Imgur and Photobucket, we recommend that for anything except casual use, that you upload the images to your own site.
The process for doing this depends on your site setup, however for something like a Wordpress blog it's as simple as clicking on the "Add Media" button in the page/post edit window.
HTML code for adding video to a page
If you upload a video to YouTube or a similar site, they will usually provide you with "Embed code" for adding the video to your page.
Also, you can usually just add videos to a post in the same way as images when using Wordpress or similar website/blog editors.
However if you are not using a blog or content management system and prefer to have the video directly added to your site (for example to avoid ads etc.), you can use some simple HTML 5 code to display it once you have uploaded it to your website or host.
This should work in most moden browsers (only with the .mp4 video format):
Replace (your video url) with the direct URL link to your video.
For HTML 5 video to work on IE9, you will also need to add this to the <head> part of the page:
Opera v30: Note that there is a bug in some versions of Opera version 30 which prevents h.264/MP4 videos from playing correctly on some systems.
HTML Video players for older web browser support
Even though practically all modern browsers will successfully playback video using the HTML 5 <video> tag above, there still exists some playback issues across older browser versions.
If you really need to ensure that the videos play on older browsers, we suggest looking at a HTML 5 video player script. There are a number available, and there's a good comparison page here.
You could try looking at mediaelement.js or video.js.
These are both simple, free scripts that will automatically detect browser video support and adjust your video settings accordingly.
You can typically keep the existing <video> tags on your page and add attributes and/or classes as per instructions to enable the video players.
iOS and Android video support
Browsers on mobile devices such as iOS and Android can be a little more picky about HTML video playback. They may support only some of the video tags, such as loop and controls, and ignore others.
They can also have more specific requirements about the webserver hosting the video, such as supporting byte-range requests.
Usually, you won't have a problem with mobile users being able to see HTML 5 video, however the above information may be useful if you do see some issue with it.
Although we provide upload buttons for hosting on Imgur and Photobucket, we recommend that for anything except casual use, that you upload the images to your own site.
The process for doing this depends on your site setup, however for something like a Wordpress blog it's as simple as clicking on the "Add Media" button in the page/post edit window.
HTML code for adding video to a page
If you upload a video to YouTube or a similar site, they will usually provide you with "Embed code" for adding the video to your page.
Also, you can usually just add videos to a post in the same way as images when using Wordpress or similar website/blog editors.
However if you are not using a blog or content management system and prefer to have the video directly added to your site (for example to avoid ads etc.), you can use some simple HTML 5 code to display it once you have uploaded it to your website or host.
This should work in most moden browsers (only with the .mp4 video format):
<video loop="loop" controls="controls">
<source src="(your video url)" type="video/mp4">
</video>
Replace (your video url) with the direct URL link to your video.
For HTML 5 video to work on IE9, you will also need to add this to the <head> part of the page:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
Opera v30: Note that there is a bug in some versions of Opera version 30 which prevents h.264/MP4 videos from playing correctly on some systems.
HTML Video players for older web browser support
Even though practically all modern browsers will successfully playback video using the HTML 5 <video> tag above, there still exists some playback issues across older browser versions.
If you really need to ensure that the videos play on older browsers, we suggest looking at a HTML 5 video player script. There are a number available, and there's a good comparison page here.
You could try looking at mediaelement.js or video.js.
These are both simple, free scripts that will automatically detect browser video support and adjust your video settings accordingly.
You can typically keep the existing <video> tags on your page and add attributes and/or classes as per instructions to enable the video players.
iOS and Android video support
Browsers on mobile devices such as iOS and Android can be a little more picky about HTML video playback. They may support only some of the video tags, such as loop and controls, and ignore others.
They can also have more specific requirements about the webserver hosting the video, such as supporting byte-range requests.
Usually, you won't have a problem with mobile users being able to see HTML 5 video, however the above information may be useful if you do see some issue with it.
The animation doesn't work after I add it to my site
Check that the file hasn't been converted to a different format somewhere along the process of adding it to your website.
Animations (with the exception of video) should be files with a ".gif" extension - if they have somehow been converted to JPEG for example, the animation won't work since this file format doesn't support animation.
A useful tool to check exactly what is being displayed on your site is to use a browser inspection function, such as "Inspect Element" in Google Chrome. Right-click on the problematic image on your site, choose Inspect Element and try to find the "<img src=..." code which references your image (you may need to search around for this).
You may then be able to click "Open Link in new tab" to display the image and confirm that it's the correct filename and format.
Animations (with the exception of video) should be files with a ".gif" extension - if they have somehow been converted to JPEG for example, the animation won't work since this file format doesn't support animation.
A useful tool to check exactly what is being displayed on your site is to use a browser inspection function, such as "Inspect Element" in Google Chrome. Right-click on the problematic image on your site, choose Inspect Element and try to find the "<img src=..." code which references your image (you may need to search around for this).
You may then be able to click "Open Link in new tab" to display the image and confirm that it's the correct filename and format.