<< Back | Main Menu | FAQ | [?]

Embed Videos

Add web videos to your website in seconds.

CSS/JS files (add code to <HEAD> section):

?
1
No JS/CSS files required.

Vimeo

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- DC Vimeo Embed Start -->
<iframe src="http://player.vimeo.com/video/4749536" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<!-- <iframe src="http://player.vimeo.com/video/VIDEO_ID_HERE" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> -->
<!-- DC Vimeo Embed End -->
 
Parameters:
---------------------
title - Show the title on the video. Defaults to 1.
byline  - Show the user’s byline on the video. Defaults to 1.
portrait - Show the user’s portrait on the video. Defaults to 1.
color - Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #.
autoplay - Play the video automatically on load. Defaults to 0. Note that this won’t work on some devices.
loop - Play the video again when it reaches the end. Defaults to 0.
api - Set to 1 to enable the Javascript API.
player_id - An unique id for the player that will be passed back with all Javascript API responses.
allowFullScreen - allow fullscreen maximize
mozallowfullscreen - allow fullscreen maximize in Firefox
webkitAllowFullScreen - allow fullscreen maximize in Chrome/Safari

YouTube

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- DC YouTube Embed Start -->
<iframe width="600" height="300" src="http://www.youtube.com/embed/FG0fTKAqZ5g?rel=0" frameborder="0" allowfullscreen></iframe>
<!-- <iframe width="600" height="300" src="http://www.youtube.com/embed/VIDEO_ID_HERE?rel=0" frameborder="0" allowfullscreen></iframe> -->
<!-- DC YouTube Embed End -->
 
Parameters:
---------------------
?rel=0 - indicates whether the player should show related videos when playback of the initial video ends
?autoplay=0 (default) OR autoplay=1 - Set whether or not the initial video will autoplay when the player loads.
?#t=XmYs - Link your viewers to the most interesting part of the video: Make your video play starting from X minutes and Y seconds
?loop=0 (default) OR loop=1 - makes the video start again without user intervention after it reaches the end.
?controls=0 - indicates whether the video player controls will display. If set to 0, player controls will not display.

HTML 5


Works with IE 9+, Firefox4+, Chrome 6+, Opera 10+, Safari 5+

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- DC HTML 5 Video Embed Start -->
<video poster="http://cdn.dcodes.net/sc-samples/sample-clip.png" controls preload="metadata" width="600" height="300">
<source src="http://cdn.dcodes.net/sc-samples/sample-clip.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""> <!-- for IE -->
<source src="http://cdn.dcodes.net/sc-samples/sample-clip.webm" type="video/webm; codecs="vp8, vorbis""> <!-- for Firefox -->
If you see this message, your browser does not support the video tag.
</video>
<!-- DC HTML 5 Video Embed End -->
 
Parameters:
---------------------
autoplay -  Specifies that the video will start playing as soon as it is ready
controls - Specifies that video controls should be displayed (such as a play/pause button etc).
height - Sets the height of the video player
loop - Specifies that the video will start over again, every time it is finished
muted -     Specifies that the audio output of the video should be muted
poster - Specifies an image url to be shown while the video is downloading
preload (auto/metadata/none) - Specifies if and how the author thinks the video should be loaded when the page loads
src - Specifies the URL of the video file
width - Sets the width of the video player
 
Note: If your video fails to load due to a MIME types error, make sure your root .htaccess file contains:
AddType video/webm webm
AddType video/mp4 mp4

Dailymotion


View code:

?
1
2
3
4
5
6
7
8
9
10
11
<!-- DC DailyMotion Embed Start -->
<iframe src="http://www.dailymotion.com/embed/video/xq2cmn?logo=1" width="600" height="300" frameborder="0"></iframe>
<!-- <iframe src="http://www.dailymotion.com/embed/video/VIDEO_ID_HERE?logo=1" width="600" height="300" frameborder="0"></iframe> -->
<!-- DC DailyMotion Embed End -->
 
Parameters:
---------------------
src - Specifies the URL of the video file
logo (0/1) - Shows dailymotion logo (default is 1 = on)
height - Sets the height of the video player
width - Sets the width of the video player


© TemplateAccess