Hugging Face's logo

Spaces:
smashmash
/
youtube-embed-plugin
Running

App Files Community
smashmash commited on
Commit
c12db6a
Β·
verified Β·
1 Parent(s): 2faf7fa

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +494 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Youtube Embed Plugin
3
- emoji: ⚑
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: youtube-embed-plugin
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,494 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube Embed Plugin for WordPress</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .fade-in {
11
+ animation: fadeIn 0.3s ease-in-out;
12
+ }
13
+ @keyframes fadeIn {
14
+ from { opacity: 0; transform: translateY(10px); }
15
+ to { opacity: 1; transform: translateY(0); }
16
+ }
17
+ .channel-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
20
+ }
21
+ .video-thumbnail:hover {
22
+ transform: scale(1.03);
23
+ }
24
+ .tab-active {
25
+ border-bottom: 3px solid #3b82f6;
26
+ color: #3b82f6;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
32
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
33
+ <div class="flex items-center justify-between mb-6">
34
+ <div>
35
+ <h1 class="text-3xl font-bold text-gray-800 flex items-center">
36
+ <i class="fab fa-youtube text-red-600 mr-3"></i>
37
+ YouTube Embed Plugin
38
+ </h1>
39
+ <p class="text-gray-600">Embed YouTube videos automatically with powerful customization options</p>
40
+ </div>
41
+ <div class="flex space-x-3">
42
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
43
+ <i class="fas fa-save mr-2"></i> Save Settings
44
+ </button>
45
+ <button id="downloadBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
46
+ <i class="fas fa-download mr-2"></i> Download Plugin
47
+ </button>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="border-b border-gray-200 mb-6">
52
+ <nav class="-mb-px flex space-x-8">
53
+ <button id="settings-tab" class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Plugin Settings</button>
54
+ <button id="channels-tab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700">Manage Channels</button>
55
+ <button id="categories-tab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700">Post Categories</button>
56
+ <button id="preview-tab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700">Video Preview</button>
57
+ </nav>
58
+ </div>
59
+
60
+ <!-- Settings Tab -->
61
+ <div id="settings-content" class="fade-in">
62
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
63
+ <div class="bg-gray-50 p-5 rounded-lg">
64
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Basic Settings</h3>
65
+ <div class="space-y-4">
66
+ <div>
67
+ <label for="cache_duration" class="block text-sm font-medium text-gray-700 mb-1">Cache Duration</label>
68
+ <select id="cache_duration" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
69
+ <option value="3600">1 Hour</option>
70
+ <option value="10800" selected>3 Hours</option>
71
+ <option value="21600">6 Hours</option>
72
+ <option value="43200">12 Hours</option>
73
+ <option value="86400">24 Hours</option>
74
+ </select>
75
+ </div>
76
+ <div>
77
+ <label for="max_videos" class="block text-sm font-medium text-gray-700 mb-1">Max Videos to Fetch</label>
78
+ <select id="max_videos" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
79
+ <option value="5">5 Videos</option>
80
+ <option value="10" selected>10 Videos</option>
81
+ <option value="15">15 Videos</option>
82
+ <option value="20">20 Videos</option>
83
+ <option value="25">25 Videos</option>
84
+ </select>
85
+ </div>
86
+ <div class="flex items-center">
87
+ <input id="auto_post" name="auto_post" type="checkbox" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
88
+ <label for="auto_post" class="ml-2 block text-sm text-gray-900">Auto-post videos hourly</label>
89
+ </div>
90
+ <div class="flex items-center">
91
+ <input id="disable_cookies" name="disable_cookies" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
92
+ <label for="disable_cookies" class="ml-2 block text-sm text-gray-900">Disable YouTube cookies in embeds</label>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="bg-gray-50 p-5 rounded-lg">
98
+ <h3 class="text-lg font-medium text-gray-900 mb-3">SEO & Advanced</h3>
99
+ <div class="space-y-4">
100
+ <div>
101
+ <label for="video_layout" class="block text-sm font-medium text-gray-700 mb-1">Video Layout</label>
102
+ <select id="video_layout" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
103
+ <option value="grid">Grid View</option>
104
+ <option value="list" selected>List View</option>
105
+ <option value="carousel">Carousel</option>
106
+ </select>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <input id="enable_seo" name="enable_seo" type="checkbox" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
110
+ <label for="enable_seo" class="ml-2 block text-sm text-gray-900">Enable SEO optimizations</label>
111
+ </div>
112
+ <div class="flex items-center">
113
+ <input id="lazy_load" name="lazy_load" type="checkbox" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
114
+ <label for="lazy_load" class="ml-2 block text-sm text-gray-900">Lazy load videos</label>
115
+ </div>
116
+ <div class="flex items-center">
117
+ <input id="show_related" name="show_related" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
118
+ <label for="show_related" class="ml-2 block text-sm text-gray-900">Show related videos</label>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="bg-gray-50 p-5 rounded-lg mb-6">
125
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Feed Sources</h3>
126
+ <div class="space-y-4">
127
+ <div class="flex items-center space-x-4">
128
+ <div class="flex items-center">
129
+ <input id="feed_channel" name="feed_type" type="radio" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
130
+ <label for="feed_channel" class="ml-2 block text-sm text-gray-900">Channel Feed</label>
131
+ </div>
132
+ <div class="flex items-center">
133
+ <input id="feed_playlist" name="feed_type" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
134
+ <label for="feed_playlist" class="ml-2 block text-sm text-gray-900">Playlist Feed</label>
135
+ </div>
136
+ </div>
137
+ <p class="text-sm text-gray-500">Use the Channels tab to add and manage multiple YouTube channels</p>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="bg-gray-50 p-5 rounded-lg">
142
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Shortcode Usage</h3>
143
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-md mb-3">
144
+ <code class="text-sm">
145
+ [youtube_embed channel="UCXXXXXX" count="5" layout="grid" category="news"]
146
+ </code>
147
+ </div>
148
+ <div class="flex flex-wrap gap-2">
149
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">channel="UCXXXXXX"</div>
150
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">count="5"</div>
151
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">layout="grid"</div>
152
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">category="news"</div>
153
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">search="keyword"</div>
154
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">nocookies="true"</div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Channels Tab -->
160
+ <div id="channels-content" class="hidden fade-in">
161
+ <div class="bg-gray-50 p-5 rounded-lg mb-6">
162
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Add New Channel</h3>
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
164
+ <div>
165
+ <label for="channel_id" class="block text-sm font-medium text-gray-700 mb-1">Channel ID</label>
166
+ <input type="text" id="channel_id" class="mt-1 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md p-2" placeholder="UCxxxxxxxxxxxxxxxxx">
167
+ </div>
168
+ <div>
169
+ <label for="channel_name" class="block text-sm font-medium text-gray-700 mb-1">Display Name</label>
170
+ <input type="text" id="channel_name" class="mt-1 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md p-2" placeholder="My YouTube Channel">
171
+ </div>
172
+ <div class="flex items-end">
173
+ <button id="add-channel-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
174
+ <i class="fas fa-plus-circle mr-2"></i> Add Channel
175
+ </button>
176
+ </div>
177
+ </div>
178
+ <p class="mt-2 text-sm text-gray-500">Find your Channel ID in your YouTube account settings</p>
179
+ </div>
180
+
181
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
182
+ <h4 class="bg-gray-50 px-4 py-3 text-sm font-medium text-gray-700 border-b border-gray-200">Your YouTube Channels</h4>
183
+ <div id="channels-list" class="divide-y divide-gray-200">
184
+ <!-- Channels will be added here dynamically -->
185
+ <div class="p-4">
186
+ <p class="text-gray-500 text-center">No channels added yet</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Categories Tab -->
193
+ <div id="categories-content" class="hidden fade-in">
194
+ <div class="bg-gray-50 p-5 rounded-lg mb-6">
195
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Post Categories</h3>
196
+ <p class="text-sm text-gray-600 mb-4">Select which WordPress categories videos will be posted to. You can assign different categories for different channels.</p>
197
+
198
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
199
+ <div>
200
+ <label for="default_category" class="block text-sm font-medium text-gray-700 mb-1">Default Category</label>
201
+ <select id="default_category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
202
+ <option value="0">-- Select Category --</option>
203
+ <option value="1" selected>Videos</option>
204
+ <option value="2">News</option>
205
+ <option value="3">Tutorials</option>
206
+ <option value="4">Entertainment</option>
207
+ </select>
208
+ </div>
209
+ <div>
210
+ <label for="category_mapping" class="block text-sm font-medium text-gray-700 mb-1">Category Mapping</label>
211
+ <button id="add-mapping-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
212
+ <i class="fas fa-plus-circle mr-2"></i> Add Channel-Category Mapping
213
+ </button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
219
+ <h4 class="bg-gray-50 px-4 py-3 text-sm font-medium text-gray-700 border-b border-gray-200">Current Mappings</h4>
220
+ <div id="mappings-list" class="divide-y divide-gray-200">
221
+ <div class="grid grid-cols-12 gap-4 items-center p-4">
222
+ <div class="col-span-5 font-medium">Channel Name</div>
223
+ <div class="col-span-5 font-medium">Category</div>
224
+ <div class="col-span-2 font-medium">Actions</div>
225
+ </div>
226
+ <div class="grid grid-cols-12 gap-4 items-center p-4 bg-gray-50">
227
+ <div class="col-span-5">My YouTube Channel</div>
228
+ <div class="col-span-5">Tutorials</div>
229
+ <div class="col-span-2">
230
+ <button class="text-red-600 hover:text-red-800">
231
+ <i class="fas fa-trash-alt"></i>
232
+ </button>
233
+ </div>
234
+ </div>
235
+ <div class="grid grid-cols-12 gap-4 items-center p-4">
236
+ <div class="col-span-5">Tech Videos</div>
237
+ <div class="col-span-5">News</div>
238
+ <div class="col-span-2">
239
+ <button class="text-red-600 hover:text-red-800">
240
+ <i class="fas fa-trash-alt"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Preview Tab -->
249
+ <div id="preview-content" class="hidden fade-in">
250
+ <div class="bg-gray-50 p-5 rounded-lg mb-6">
251
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Video Preview</h3>
252
+ <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
253
+ <div class="flex-1 min-w-[200px]">
254
+ <label for="preview_channel" class="block text-sm font-medium text-gray-700 mb-1">Select Channel</label>
255
+ <select id="preview_channel" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
256
+ <option value="all">All Channels</option>
257
+ <option value="UCXXXXXX1">My YouTube Channel</option>
258
+ <option value="UCXXXXXX2">Tech Videos</option>
259
+ </select>
260
+ </div>
261
+ <div class="flex-1 min-w-[200px]">
262
+ <label for="preview_search" class="block text-sm font-medium text-gray-700 mb-1">Search Videos</label>
263
+ <input type="text" id="preview_search" class="mt-1 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md p-2" placeholder="Search by title...">
264
+ </div>
265
+ <div class="flex-1 min-w-[200px]">
266
+ <label for="preview_sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
267
+ <select id="preview_sort" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
268
+ <option value="date_newest">Date (Newest First)</option>
269
+ <option value="date_oldest">Date (Oldest First)</option>
270
+ <option value="title_asc">Title (A-Z)</option>
271
+ <option value="title_desc">Title (Z-A)</option>
272
+ </select>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div id="preview-results">
278
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
279
+ <!-- Example video cards -->
280
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200">
281
+ <div class="video-thumbnail relative pb-[56.25%] overflow-hidden transition-transform duration-200">
282
+ <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail" class="absolute h-full w-full object-cover">
283
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
284
+ <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center">
285
+ <i class="fas fa-play text-white"></i>
286
+ </div>
287
+ </div>
288
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-1.5 py-0.5 rounded">
289
+ 10:24
290
+ </div>
291
+ </div>
292
+ <div class="p-4">
293
+ <h4 class="text-lg font-medium text-gray-900 mb-1 line-clamp-2">Never Gonna Give You Up - Rick Astley (Official Music Video)</h4>
294
+ <p class="text-sm text-gray-600 mb-2">My YouTube Channel β€’ 2 days ago</p>
295
+ <p class="text-sm text-gray-500 line-clamp-2">The official video for "Never Gonna Give You Up" by Rick Astley, the song that started the Rickrolling phenomenon.</p>
296
+ <div class="mt-3 flex justify-between items-center">
297
+ <span class="text-xs text-gray-500">1.2B views</span>
298
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
299
+ <i class="fas fa-plus-circle mr-1"></i> Post to Site
300
+ </button>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200">
306
+ <div class="video-thumbnail relative pb-[56.25%] overflow-hidden transition-transform duration-200">
307
+ <img src="https://i.ytimg.com/vi/9bZkp7q19f0/hqdefault.jpg" alt="Video thumbnail" class="absolute h-full w-full object-cover">
308
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
309
+ <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center">
310
+ <i class="fas fa-play text-white"></i>
311
+ </div>
312
+ </div>
313
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-1.5 py-0.5 rounded">
314
+ 4:12
315
+ </div>
316
+ </div>
317
+ <div class="p-4">
318
+ <h4 class="text-lg font-medium text-gray-900 mb-1 line-clamp-2">PSY - GANGNAM STYLE(κ°•λ‚¨μŠ€νƒ€μΌ) M/V</h4>
319
+ <p class="text-sm text-gray-600 mb-2">Tech Videos β€’ 1 week ago</p>
320
+ <p class="text-sm text-gray-500 line-clamp-2">The most viewed video on YouTube with over 4 billion views. PSY's global hit that took the world by storm.</p>
321
+ <div class="mt-3 flex justify-between items-center">
322
+ <span class="text-xs text-gray-500">4.5B views</span>
323
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
324
+ <i class="fas fa-plus-circle mr-1"></i> Post to Site
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200">
331
+ <div class="video-thumbnail relative pb-[56.25%] overflow-hidden transition-transform duration-200">
332
+ <img src="https://i.ytimg.com/vi/JGwWNGJdvx8/hqdefault.jpg" alt="Video thumbnail" class="absolute h-full w-full object-cover">
333
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
334
+ <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center">
335
+ <i class="fas fa-play text-white"></i>
336
+ </div>
337
+ </div>
338
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-1.5 py-0.5 rounded">
339
+ 3:23
340
+ </div>
341
+ </div>
342
+ <div class="p-4">
343
+ <h4 class="text-lg font-medium text-gray-900 mb-1 line-clamp-2">Ed Sheeran - Shape of You</h4>
344
+ <p class="text-sm text-gray-600 mb-2">My YouTube Channel β€’ 3 weeks ago</p>
345
+ <p class="text-sm text-gray-500 line-clamp-2">Ed Sheeran's chart-topping hit that became one of the most streamed songs of all time.</p>
346
+ <div class="mt-3 flex justify-between items-center">
347
+ <span class="text-xs text-gray-500">3.8B views</span>
348
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
349
+ <i class="fas fa-plus-circle mr-1"></i> Post to Site
350
+ </button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
360
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Plugin File Structure</h2>
361
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-md mb-4">
362
+ <pre class="text-sm">
363
+ youtube-embed-plugin/
364
+ β”œβ”€β”€ assets/
365
+ β”‚ β”œβ”€β”€ css/
366
+ β”‚ β”‚ └── admin.css
367
+ β”‚ β”œβ”€β”€ js/
368
+ β”‚ β”‚ └── admin.js
369
+ β”‚ └── images/
370
+ β”‚ └── icon-128x128.png
371
+ β”œβ”€β”€ includes/
372
+ β”‚ β”œβ”€β”€ class-yt-embed-admin.php
373
+ β”‚ β”œβ”€β”€ class-yt-embed-cron.php
374
+ β”‚ β”œβ”€β”€ class-yt-embed-feed.php
375
+ β”‚ β”œβ”€β”€ class-yt-embed-shortcode.php
376
+ β”‚ └── class-yt-embed-widget.php
377
+ β”œβ”€β”€ languages/
378
+ β”œβ”€β”€ templates/
379
+ β”‚ β”œβ”€β”€ video-grid.php
380
+ β”‚ β”œβ”€β”€ video-list.php
381
+ β”‚ └── video-single.php
382
+ β”œβ”€β”€ uninstall.php
383
+ β”œβ”€β”€ index.php
384
+ └── youtube-embed-plugin.php</pre>
385
+ </div>
386
+ <div class="bg-blue-100 border-l-4 border-blue-500 p-4 mb-4">
387
+ <div class="flex">
388
+ <div class="flex-shrink-0">
389
+ <i class="fas fa-info-circle text-blue-500"></i>
390
+ </div>
391
+ <div class="ml-3">
392
+ <h3 class="text-sm font-medium text-blue-800">Plugin Installation</h3>
393
+ <div class="mt-2 text-sm text-blue-700">
394
+ <p>To install this plugin:</p>
395
+ <ol class="list-decimal pl-5 mt-1 space-y-1">
396
+ <li>Download the zip file by clicking the button above</li>
397
+ <li>Go to WordPress admin β†’ Plugins β†’ Add New β†’ Upload Plugin</li>
398
+ <li>Select the zip file and click "Install Now"</li>
399
+ <li>Activate the plugin after installation</li>
400
+ <li>Configure settings under YouTube Embed in your dashboard</li>
401
+ </ol>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <script>
410
+ // Tab switching functionality
411
+ document.addEventListener('DOMContentLoaded', function() {
412
+ const tabs = {
413
+ 'settings-tab': 'settings-content',
414
+ 'channels-tab': 'channels-content',
415
+ 'categories-tab': 'categories-content',
416
+ 'preview-tab': 'preview-content'
417
+ };
418
+
419
+ // Set up tab click handlers
420
+ Object.keys(tabs).forEach(tabId => {
421
+ const tab = document.getElementById(tabId);
422
+ const content = document.getElementById(tabs[tabId]);
423
+
424
+ tab.addEventListener('click', () => {
425
+ // Hide all content
426
+ Object.values(tabs).forEach(contentId => {
427
+ document.getElementById(contentId).classList.add('hidden');
428
+ });
429
+
430
+ // Remove active class from all tabs
431
+ Object.keys(tabs).forEach(tabId => {
432
+ document.getElementById(tabId).classList.remove('tab-active');
433
+ document.getElementById(tabId).classList.add('text-gray-500', 'hover:text-gray-700');
434
+ });
435
+
436
+ // Show selected content and mark tab as active
437
+ content.classList.remove('hidden');
438
+ tab.classList.add('tab-active');
439
+ tab.classList.remove('text-gray-500', 'hover:text-gray-700');
440
+ });
441
+ });
442
+
443
+ // Channel management
444
+ const channelsList = document.getElementById('channels-list');
445
+ const addChannelBtn = document.getElementById('add-channel-btn');
446
+
447
+ addChannelBtn.addEventListener('click', function() {
448
+ const channelId = document.getElementById('channel_id').value.trim();
449
+ const channelName = document.getElementById('channel_name').value.trim();
450
+
451
+ if (channelId && channelName) {
452
+ // Add channel to the list
453
+ const channelHtml = `
454
+ <div class="flex justify-between items-center p-4 hover:bg-gray-50">
455
+ <div class="flex items-center space-x-4">
456
+ <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
457
+ <i class="fab fa-youtube text-red-600"></i>
458
+ </div>
459
+ <div>
460
+ <h4 class="font-medium text-gray-900">${channelName}</h4>
461
+ <p class="text-sm text-gray-500">${channelId}</p>
462
+ </div>
463
+ </div>
464
+ <div class="flex space-x-2">
465
+ <button class="text-blue-600 hover:text-blue-800 px-3 py-1 rounded">
466
+ <i class="fas fa-edit"></i>
467
+ </button>
468
+ <button class="text-red-600 hover:text-red-800 px-3 py-1 rounded">
469
+ <i class="fas fa-trash-alt"></i>
470
+ </button>
471
+ </div>
472
+ </div>
473
+ `;
474
+
475
+ if (channelsList.querySelector('.text-center')) {
476
+ channelsList.innerHTML = channelHtml;
477
+ } else {
478
+ channelsList.insertAdjacentHTML('beforeend', channelHtml);
479
+ }
480
+
481
+ // Clear inputs
482
+ document.getElementById('channel_id').value = '';
483
+ document.getElementById('channel_name').value = '';
484
+ }
485
+ });
486
+
487
+ // Download button handler (demonstration only)
488
+ document.getElementById('downloadBtn').addEventListener('click', function() {
489
+ alert('In a real implementation, this would download the plugin zip file.\n\nFor demonstration purposes, this alert shows instead.');
490
+ });
491
+ });
492
+ </script>
493
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=smashmash/youtube-embed-plugin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
494
+ </html>