-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyoutube.html
119 lines (107 loc) · 3.54 KB
/
youtube.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube video</title>
<!-- Include jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- Include the Custom Elements API-->
<script src="https://app.kenticocloud.com/js-api/custom-element.js"></script>
<!-- Custom element CSS styles -->
<style>
/* We recommended you always set margin to zero to avoid problems when displaying the element in UI */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body {
margin: 0;
padding: 10px;
}
#youtube_input {
padding: 10px;
margin-bottom: 1em;
width: calc(100% - 25px);
}
.disabled_overlay {
position: fixed;
background-color: #777;
z-index: 10;
cursor: not-allowed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
</style>
</head>
<body>
<div class="disabled_overlay"></div>
<div class="youtube-wrapper">
<input id="youtube_input" type="text" placeholder="cnGpXG0mNdU or https://www.youtube.com/watch?v=cnGpXG0mNdU or https://youtu.be/cnGpXG0mNdU">
<div id="youtube_video"></div>
</div>
<!-- Custom logic of the Custom element -->
<script>
function updateDisabled(disabled) {
if (disabled) {
$('.disabled_overlay').show();
}
else {
$('.disabled_overlay').hide();
}
}
function showVideo(value,width,height) {
if (value) {
$("#youtube_video").html('<object width="'+width+'" height="'+height+'" data="https://www.youtube.com/embed/'+value+'"></object>');
}
else {
$("#youtube_video").html('');
}
updateSize();
}
function findID(url) {
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}
function setup(value,width,height) {
$("#youtube_input").val(value);
showVideo(value,width,height);
$("#youtube_input").on('input', function() {
var id = findID($(this).val());
CustomElement.setValue(id);
$("#youtube_input").val(id);
showVideo($(this).val(),width,height);
});
}
function updateSize() {
// Update the Custom element height in the Kentico Cloud UI
const height = parseInt($("html").height());
CustomElement.setHeight(height);
}
function initCustomElement() {
try {
CustomElement.init((element, _context) => {
var width = (element.config?element.config.width:"400");
var height = (element.config?element.config.height:"300");
// Setup with initial value and disabled state
setup(element.value,width,height);
updateDisabled(element.disabled);
updateSize();
});
// React when the disabled state changes (e.g. when publishing the item)
CustomElement.onDisabledChanged(updateDisabled);
} catch (err) {
// Initialization with the Custom elements API failed
// (page displayed outside of the Kentico Cloud UI)
console.error(err);
updateDisabled(true);
}
}
initCustomElement();
</script>
</body>
</html>