{"id":29022677,"url":"https://github.com/lyndoncortez/yt-feed-widget","last_synced_at":"2026-04-15T12:38:23.089Z","repository":{"id":301199247,"uuid":"1007824011","full_name":"lyndoncortez/yt-feed-widget","owner":"lyndoncortez","description":"YouTube feed tool for CRO and A/B testing","archived":false,"fork":false,"pushed_at":"2025-06-27T17:53:06.000Z","size":97,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-27T13:33:28.285Z","etag":null,"topics":["ab-testing","carousel","conversion-rate-optimization","grid","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyndoncortez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-24T15:28:20.000Z","updated_at":"2025-06-26T17:51:29.000Z","dependencies_parsed_at":"2025-06-25T17:29:29.092Z","dependency_job_id":"ba6be306-58fe-4d81-837c-b3c382b93b1f","html_url":"https://github.com/lyndoncortez/yt-feed-widget","commit_stats":null,"previous_names":["lyndoncortez/yt-feed-widget"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lyndoncortez/yt-feed-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyndoncortez%2Fyt-feed-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyndoncortez%2Fyt-feed-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyndoncortez%2Fyt-feed-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyndoncortez%2Fyt-feed-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyndoncortez","download_url":"https://codeload.github.com/lyndoncortez/yt-feed-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyndoncortez%2Fyt-feed-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T11:29:19.690Z","status":"ssl_error","status_checked_at":"2026-04-15T11:29:19.171Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ab-testing","carousel","conversion-rate-optimization","grid","youtube"],"created_at":"2025-06-26T03:03:22.301Z","updated_at":"2026-04-15T12:38:23.062Z","avatar_url":"https://github.com/lyndoncortez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YT Feed Widget\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![GitHub release](https://img.shields.io/github/v/release/lyndoncortez/yt-feed-widget)](https://github.com/lyndoncortez/yt-feed-widget/releases)\n[![CDN](https://img.shields.io/badge/CDN-jsDelivr-orange)](https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-all.min.js)\n\n**The fastest way to add YouTube feeds for A/B testing and CRO.** 🚀\n\nSkip the development hassle. Copy, paste, and test video content impact on your conversions in minutes, not weeks. Perfect for CRO teams who need to test video placements quickly without custom development.\n\n## 🎨 Choose Your Layout\n\n### 🎠 Carousel Layout\nPerfect for homepage heroes and featured content sections. [View Carousel Demo](https://lyndoncortez.github.io/yt-feed-widget/demo/)\n\n### 📊 Grid Layout\nClean grid display ideal for portfolios and video galleries. [View Grid Demo](https://lyndoncortez.github.io/yt-feed-widget/demo/grid.html)\n\n### 🔄 Combined Package\nUse both layouts in the same project for maximum A/B testing flexibility.\n\n## 🎯 Why Choose This Tool\n\n- ⚡ **Quick \u0026 Easy Integration** - Copy, paste, done. Test video impact in under 5 minutes\n- 🔄 **Perfect for A/B Testing** - Easy to add/remove for clean test variations\n- 📊 **Ready-Made Social Proof** - Customer testimonials, product demos, case studies\n- 📱 **Mobile-First Design** - Works perfectly on all devices (critical for mobile CRO)\n- 🎨 **Looks Professional** - No \"cheap plugin\" look that hurts conversions\n- 📈 **Common CRO Use Cases:**\n  - Homepage hero video sections\n  - Product page demonstration videos\n  - Landing page customer testimonials\n  - Pricing page success stories\n  - About page team/culture videos\n  - Thank you page retention content\n\n## 🚀 Quick Start - Choose Your Style\n\n### Option 1: Carousel Layout (Horizontal Scrolling)\n\n```html\n\u003c!-- CSS + JavaScript --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-carousel.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-carousel.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Your carousel container --\u003e\n\u003cdiv id=\"video-carousel\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nnew YTFeedCarousel('video-carousel', {\n    apiKey: 'YOUR_API_KEY',\n    playlistId: 'YOUR_PLAYLIST_ID',\n    maxResults: 12,\n    autoPlay: true\n});\n\u003c/script\u003e\n```\n\n### Option 2: Grid Layout (Clean Grid Display)\n\n```html\n\u003c!-- CSS + JavaScript --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-grid.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-grid.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Your grid container --\u003e\n\u003cdiv id=\"video-grid\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nnew YTFeedGrid('video-grid', {\n    apiKey: 'YOUR_API_KEY',\n    playlistId: 'YOUR_PLAYLIST_ID',\n    gridColumns: 3,\n    gridRows: 2,\n    showLoadMore: true\n});\n\u003c/script\u003e\n```\n\n### Option 3: Both Layouts (Maximum Flexibility)\n\n```html\n\u003c!-- Combined CSS + JavaScript (includes both layouts) --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-all.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/lyndoncortez/yt-feed-widget@latest/dist/yt-feed-all.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Use either or both on the same page --\u003e\n\u003cdiv id=\"hero-carousel\"\u003e\u003c/div\u003e\n\u003cdiv id=\"portfolio-grid\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n// Carousel for hero section\nnew YTFeedCarousel('hero-carousel', { \n    apiKey: 'YOUR_API_KEY', \n    playlistId: 'YOUR_PLAYLIST_ID' \n});\n\n// Grid for portfolio section  \nnew YTFeedGrid('portfolio-grid', { \n    apiKey: 'YOUR_API_KEY', \n    playlistId: 'YOUR_PLAYLIST_ID',\n    gridColumns: 4 \n});\n\u003c/script\u003e\n```\n\n## 📖 Setup in 3 Steps\n\n### Step 1: Get Your YouTube Playlist ID\n1. Go to the YouTube playlist you want to display\n2. Copy the ID from the URL: `youtube.com/playlist?list=COPY_THIS_PART`\n\n### Step 2: Get a Free YouTube API Key\n1. Visit [Google Cloud Console](https://console.developers.google.com)\n2. Create a project → Enable \"YouTube Data API v3\" → Create API key\n3. (Takes 3 minutes, completely free)\n\n### Step 3: Add to Your Page\n1. **Copy the code snippet above**\n2. **Replace YOUR_API_KEY and YOUR_PLAYLIST_ID**\n3. **Paste it into your page**\n\n**Done!** Start your A/B test immediately.\n\n### 💡 Pro CRO Tips\n- Test customer testimonial videos vs written testimonials\n- Try product demo videos on pricing pages\n- Add founder story videos to about pages\n- Use case study videos on landing pages\n- Test video placement: above fold vs below fold\n\n## ⚙️ Configuration Options\n\n### Carousel Layout Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `apiKey` | String | **Required** | Your YouTube Data API key |\n| `playlistId` | String | **Required** | YouTube playlist ID to display |\n| `maxResults` | Number | `12` | Number of videos to load |\n| `autoPlay` | Boolean | `false` | Auto-scroll through videos |\n| `autoPlayInterval` | Number | `5000` | Auto-scroll speed (milliseconds) |\n\n### Grid Layout Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `apiKey` | String | **Required** | Your YouTube Data API key |\n| `playlistId` | String | **Required** | YouTube playlist ID to display |\n| `gridColumns` | Number | `3` | Number of columns (2, 3, or 4) |\n| `gridRows` | Number | `2` | Initial rows to display |\n| `showLoadMore` | Boolean | `true` | Show \"Load More\" button |\n| `showSubscribe` | Boolean | `true` | Show \"Subscribe\" button |\n\n### Real CRO Test Examples\n\n**Landing Page Hero Test (Carousel vs Static):**\n```javascript\n// Treatment A: Carousel\nnew YTFeedCarousel('hero-section', {\n    apiKey: 'your-key',\n    playlistId: 'customer-testimonials',\n    maxResults: 6,\n    autoPlay: true\n});\n```\n\n**Product Gallery Test (Grid vs Images):**\n```javascript\n// Treatment B: Grid\nnew YTFeedGrid('product-gallery', {\n    apiKey: 'your-key',\n    playlistId: 'product-demos',\n    gridColumns: 3,\n    gridRows: 2,\n    showLoadMore: false\n});\n```\n\n## 🔑 Getting YouTube API Key (Free \u0026 Easy!)\n\nDon't worry - it's simpler than it sounds!\n\n1. **Go to [Google Cloud Console](https://console.developers.google.com)**\n2. **Create a new project** (or use existing)\n3. **Enable YouTube Data API v3** (search for it in the API library)\n4. **Create credentials** → Choose \"API Key\"\n5. **Done!** Copy your key and use it in your code\n\n💡 **Pro tip:** Restrict your API key to YouTube Data API v3 only for security.\n\nThe free quota gives you **10,000 requests per day** - enough for most websites!\n\n## 🎮 Control Your Feeds\n\n### Carousel Methods\n```javascript\nconst carousel = new YTFeedCarousel('container', {...});\n\n// Navigation\ncarousel.next();        // Show next videos\ncarousel.prev();        // Show previous videos\ncarousel.goToSlide(2);  // Jump to specific position\n\n// Auto-play controls\ncarousel.startAutoPlay(); // Start auto-scrolling\ncarousel.stopAutoPlay();  // Stop auto-scrolling\n\n// Maintenance\ncarousel.refresh();  // Reload videos from YouTube\ncarousel.destroy();  // Remove carousel from page\n```\n\n### Grid Methods\n```javascript\nconst grid = new YTFeedGrid('container', {...});\n\n// Load more content\ngrid.loadMore();     // Show more videos\n\n// Maintenance  \ngrid.refresh();      // Reload videos from YouTube\ngrid.destroy();      // Remove grid from page\n```\n\n## 🎨 Customize for Your Brand\n\nBoth layouts support easy theming with CSS custom properties:\n\n### Carousel Styling\n```css\n.yt-feed-carousel {\n    --primary-color: #your-brand-color;\n    --background-color: #your-bg-color;\n    --text-color: #your-text-color;\n    --border-radius: 12px;\n}\n```\n\n### Grid Styling\n```css\n.yt-feed-grid {\n    --grid-gap: 20px;\n    --item-border-radius: 8px;\n    --hover-transform: translateY(-2px);\n    --button-color: #1a73e8;\n}\n```\n\n## ✨ What You Get\n\n- 📱 **Mobile-first responsive design** - Perfect on all devices\n- 🎬 **Click-to-play lightbox** - Beautiful video player experience\n- ⌨️ **Keyboard navigation** - Arrow keys for carousel\n- 👆 **Touch gestures** - Swipe support on mobile\n- ⚡ **Optimized performance** - Lazy loading and smooth animations\n- 📊 **Rich video metadata** - Views, duration, upload dates\n- 🔄 **Auto-updates** - New videos appear automatically\n- 🎯 **A/B test ready** - Easy to implement and remove\n- 🎨 **Two layout options** - Carousel and grid for different use cases\n- 📦 **Auto-built files** - Always up-to-date minified versions\n\n## 📱 Browser Support\n\n- Chrome 60+\n- Firefox 55+\n- Safari 12+\n- Edge 79+\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🐛 Issues \u0026 Support\n\nFound a bug or need help? **[Open an issue](https://github.com/lyndoncortez/yt-feed-widget/issues)** and we'll help you out!\n\n## 📊 Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for version history.\n\n## 🙏 Thanks\n\nBuilt with ❤️ for content creators who want to showcase their YouTube videos beautifully.\n\n---\n\n**[🚀 View Carousel Demo](https://lyndoncortez.github.io/yt-feed-widget/demo/)** | **[📊 View Grid Demo](https://lyndoncortez.github.io/yt-feed-widget/demo/grid.html)**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyndoncortez%2Fyt-feed-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyndoncortez%2Fyt-feed-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyndoncortez%2Fyt-feed-widget/lists"}