You can embed a part of YouTube video using the YouTube Player API. The API offers loadVideoById and cueVideoById function both of which allow you to specify a start and end time for the embedded video.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!-- We specify the various video parameters in a DIV tag -->
<div videoID="t2MOwQ089eQ" startTime="1330" endTime="1466"
height="309" width="550" id="youtube-player">
</div>
<script>
/*
YouTube Embed Code
Author: Amit Agarwal
Blog: www.labnol.org
Date: 04/15/2013
*/
var node = "youtube-player";
// Append the YouTube IFRAME API Script
var youtube = document.createElement('script');
youtube.type = "text/javascript";
youtube.src = "//www.youtube.com/iframe_api";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(youtube, s);
var player;
// Read all the parameter of the DIV tag
var params = document.getElementById(node);
var startTime = params.getAttribute("startTime");
var endTime = params.getAttribute("endTime");
var videoID = params.getAttribute("videoID");
var playerHeight = params.getAttribute("height");
var playerWidth = params.getAttribute("width");
// Prepare the YouTube Player
// We set rel=0 and showinfo=1 to hide related videos & info bar
function onYouTubeIframeAPIReady() {
player = new YT.Player(node, {
height: playerHeight,
width: playerWidth,
playerVars: {'rel': 0, 'showinfo': 0, 'hidecontrols': 1 },
events: {
'onReady': loadVideo
}
});
}
// When the player is ready, we load the video
// Using cueVideoById and not loadVideoById as the
// former function will not autoplay the video.
function loadVideo(e) {
e.target.cueVideoById({
videoId: videoID,
startSeconds: startTime,
endSeconds: endTime
});
}
</script>
|
{ 0 comments ... read them below or add one }
Post a Comment