PHPackages                             artaza/module-youtubelist - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. artaza/module-youtubelist

ActiveMagento2-module[Utility & Helpers](/categories/utility)

artaza/module-youtubelist
=========================

Add attribute on product and show list of videos

60PHP

Since Aug 2Pushed 9mo agoCompare

[ Source](https://github.com/martinartaza/youtubelist)[ Packagist](https://packagist.org/packages/artaza/module-youtubelist)[ RSS](/packages/artaza-module-youtubelist/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

YouTube List Module for Magento 2
=================================

[](#youtube-list-module-for-magento-2)

[![Magento 2](https://camo.githubusercontent.com/ca99f26813b31e2cde57b9c98425c63c1454e58d1f729804a13e569e40fadba3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342b2d6f72616e67652e737667)](https://magento.com/)[![PHP](https://camo.githubusercontent.com/45d36955804bf3f4f17097b05a7f41a28e578dc24e0d3ad0d21ae9d9762f44c6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312b2d626c75652e737667)](https://php.net/)[![License](https://camo.githubusercontent.com/d470a549d2f8a69b81698d6f6851009b9a5248fb6862af014903b7a210e02595/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4f534c2d2d332e302d677265656e2e737667)](https://opensource.org/licenses/OSL-3.0)

A powerful Magento 2 module that allows you to add YouTube video lists to your products. Display embedded videos, playlists, and individual videos with a beautiful carousel interface.

📋 Table of Contents
-------------------

[](#-table-of-contents)

- [Features](#-features)
- [Screenshots](#-screenshots)
- [Installation](#-installation)
- [Configuration](#-configuration)
- [Usage](#-usage)
- [GraphQL API](#graphql-api)
- [Testing](#-testing)
- [Code Quality](#-code-quality)
- [Architecture](#-architecture)
- [Contributing](#-contributing)

✨ Features
----------

[](#-features)

- **YouTube Video Integration**: Add YouTube videos to any product
- **Multiple Video Support**: Support for playlists, individual videos, and embedded videos
- **Beautiful UI**: Responsive carousel interface for multiple videos
- **GraphQL API**: Full GraphQL support for headless implementations
- **Admin Configuration**: Easy setup through Magento admin
- **YouTube API Integration**: Automatic thumbnail and video data fetching
- **Responsive Design**: Works perfectly on desktop and mobile devices

📸 Screenshots
-------------

[](#-screenshots)

### Product Page Display

[](#product-page-display)

[![Product Page YouTube Videos](docs/images/image_pdp.png)](docs/images/image_pdp.png)

### Admin Configuration

[](#admin-configuration)

[![Admin Configuration](docs/images/imagen_backend_config_settings_youtube.png)](docs/images/imagen_backend_config_settings_youtube.png)

### Product Attribute Setup

[](#product-attribute-setup)

[![Product Attribute Setup](docs/images/image_product_set_youtube_attribue.png)](docs/images/image_product_set_youtube_attribue.png)

🚀 Installation
--------------

[](#-installation)

### Method 1: Composer (Recommended)

[](#method-1-composer-recommended)

```
composer require artaza/module-youtubelist
bin/magento module:enable Artaza_YoutubeList
bin/magento setup:upgrade
bin/magento cache:flush
```

### Method 2: Manual Installation

[](#method-2-manual-installation)

1. Download the module files
2. Place them in `app/code/Artaza/YoutubeList/`
3. Run the following commands:

```
bin/magento module:enable Artaza_YoutubeList
bin/magento setup:upgrade
bin/magento cache:flush
```

⚙️ Configuration
----------------

[](#️-configuration)

### 1. YouTube API Key Setup

[](#1-youtube-api-key-setup)

1. Go to **Stores > Configuration > Catalog > Catalog > Product Video**
2. Enter your YouTube API Key
3. Save the configuration

### 2. Module Configuration

[](#2-module-configuration)

1. Go to **Stores > Configuration > Artaza > YouTube List**
2. Enable the module
3. Configure additional settings as needed

📝 Usage
-------

[](#-usage)

### Adding YouTube Videos to Products

[](#adding-youtube-videos-to-products)

1. **Navigate to a Product**: Go to **Catalog > Products** and edit any product
2. **Add YouTube URL**: In the product form, find the "Youtube List" attribute
3. **Enter YouTube URL**: Add your YouTube URL in one of these formats:

#### Supported URL Formats:

[](#supported-url-formats)

- **Playlist**: `https://www.youtube.com/watch?v=SzZxQIOill4&list=PLDRI6kWi9D9K1TTYIJDUPIF6wt462thBL`
- **Single Video**: `https://www.youtube.com/watch?v=SzZxQIOill4`
- **Embed URL**: `https://www.youtube.com/embed/SzZxQIOill4`
- **Multiple Videos**: Separate multiple URLs with commas

#### Example:

[](#example)

```
https://www.youtube.com/watch?v=SzZxQIOill4&list=PLDRI6kWi9D9K1TTYIJDUPIF6wt462thBL

```

4. **Save the Product**: The videos will automatically appear on the product page

### Frontend Display

[](#frontend-display)

The module automatically displays:

- **First Video**: As the main embedded player
- **Additional Videos**: In a beautiful carousel below
- **Thumbnails**: Automatic YouTube thumbnails
- **Responsive Design**: Works on all devices

🔌 GraphQL API
-------------

[](#-graphql-api)

The module provides full GraphQL support for headless implementations:

### Query Example

[](#query-example)

```
{
  products(filter: { sku: { eq: "24-WB04" } }) {
    items {
      name
      sku
      youtube_videos {
        url
        image
      }
    }
  }
}
```

### Response Example

[](#response-example)

```
{
  "data": {
    "products": {
      "items": [
        {
          "name": "Push It Messenger Bag",
          "sku": "24-WB04",
          "youtube_videos": [
            {
              "url": "https://www.youtube.com/embed/SzZxQIOill4",
              "image": "https://img.youtube.com/vi/SzZxQIOill4/mqdefault.jpg"
            },
            {
                  "url": "https://www.youtube.com/embed/nqTFVFWa-n0",
                  "image": "https://i.ytimg.com/vi/nqTFVFWa-n0/mqdefault.jpg"
            },
            {
                  "url": "https://www.youtube.com/embed/W9P-ykNCNjE",
                  "image": "https://i.ytimg.com/vi/W9P-ykNCNjE/mqdefault.jpg"
            }
          ]
        }
      ]
    }
  }
}
```

🧪 Testing
---------

[](#-testing)

The module includes comprehensive unit tests following Magento 2 standards.

### Running Tests

[](#running-tests)

```
# Run all tests
vendor/bin/phpunit app/code/Artaza/YoutubeList/Test/Unit/

# Run specific test classes
vendor/bin/phpunit app/code/Artaza/YoutubeList/Test/Unit/Helper/DataTest.php
vendor/bin/phpunit app/code/Artaza/YoutubeList/Test/Unit/Model/Resolver/YoutubeVideosTest.php
```

### Test Coverage

[](#test-coverage)

- ✅ **Helper Tests**: Complete coverage of `Data` helper methods
- ✅ **Resolver Tests**: Full coverage of GraphQL resolver
- ✅ **ViewModel Tests**: Product page view model testing
- ✅ **Edge Cases**: Null values, invalid URLs, empty responses

🎯 Code Quality
--------------

[](#-code-quality)

The module follows Magento 2 coding standards and best practices:

### Code Standards

[](#code-standards)

- ✅ **PSR-4 Autoloading**: Proper namespace structure
- ✅ **Magento 2 Standards**: Follows official coding guidelines
- ✅ **PHPCS Compliance**: Passes Magento 2 coding standards
- ✅ **Type Declarations**: Full PHP 8.1+ type support
- ✅ **Documentation**: Comprehensive PHPDoc blocks

### Quality Checks

[](#quality-checks)

```
# Run coding standards check
vendor/bin/phpcs --standard=Magento2 app/code/Artaza/YoutubeList/

# Auto-fix coding standards
vendor/bin/phpcbf --standard=Magento2 app/code/Artaza/YoutubeList/
```

🏗️ Architecture
---------------

[](#️-architecture)

### Module Structure

[](#module-structure)

```
Artaza_YoutubeList/
├── composer.json                 # Composer configuration
├── registration.php              # Module registration
├── README.md                     # Module documentation
├── Helper/
│   └── Data.php                  # Core YouTube API integration
├── Model/
│   └── Resolver/
│       └── YoutubeVideos.php    # GraphQL resolver
├── ViewModel/
│   └── ProductPage.php          # Product page view model
├── Setup/
│   └── Patch/
│       └── Data/
│           └── AddYoutubelistProductAttribute.php  # Data patch for attribute
├── etc/
│   ├── module.xml               # Module definition
│   ├── config.xml               # Module configuration
│   ├── acl.xml                  # Access Control List
│   ├── catalog_attributes.xml   # Product attribute definition
│   ├── schema.graphqls          # GraphQL schema
│   └── adminhtml/
│       └── system.xml           # Admin configuration
├── view/
│   └── frontend/
│       ├── layout/
│       │   └── catalog_product_view.xml  # Product page layout
│       ├── templates/
│       │   └── productPage.phtml         # Frontend template
│       └── web/
│           ├── css/
│           │   └── listyoutube.css       # Frontend styles
│           ├── js/
│           │   └── youtube-list.js       # Frontend JavaScript
│           └── images/
│               ├── youtube-logo.png      # YouTube logo
│               ├── play.png              # Play button
│               └── arrow.svg             # Carousel arrows
├── i18n/
│   └── es_CL.csv                # Spanish translations
├── docs/
│   └── images/                  # Documentation images
└── Test/
    └── Unit/
        ├── phpunit.xml           # PHPUnit configuration
        ├── README.md             # Test documentation
        ├── Helper/
        │   └── DataTest.php      # Helper unit tests
        ├── Model/
        │   └── Resolver/
        │       └── YoutubeVideosTest.php  # Resolver unit tests
        └── ViewModel/
            └── ProductPageTest.php        # ViewModel unit tests

```

### Key Components

[](#key-components)

- **Helper (Data)**: Handles YouTube API calls and video processing
- **GraphQL Resolver**: Provides API access to video data
- **ViewModel**: Manages product page video display
- **Template**: Renders the video carousel interface

🤝 Contributing
--------------

[](#-contributing)

We welcome contributions! Please follow these guidelines:

1. **Fork the repository**
2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
3. **Follow coding standards**: Run PHPCS before submitting
4. **Add tests**: Include unit tests for new functionality
5. **Submit a pull request**

### Development Setup

[](#development-setup)

```
# Install dependencies
composer install

# Run tests
vendor/bin/phpunit app/code/Artaza/YoutubeList/Test/Unit/

# Check coding standards
vendor/bin/phpcs --standard=Magento2 app/code/Artaza/YoutubeList/
```

📄 License
---------

[](#-license)

This module is licensed under the [OSL 3.0](https://opensource.org/licenses/OSL-3.0) license.

🆘 Support
---------

[](#-support)

For support, please:

1. Check the [documentation](#-usage)
2. Review [existing issues](https://github.com/your-repo/issues)
3. Create a new issue with detailed information

---

**Made with ❤️ for the Magento 2 community**

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance41

Moderate activity, may be stable

Popularity5

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity14

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/33dc6cf8b9038b0dee775f5dcd4ba8ce29c20427b7c5d96165a39074f77cae59?d=identicon)[martinartaza](/maintainers/martinartaza)

### Embed Badge

![Health badge](/badges/artaza-module-youtubelist/health.svg)

```
[![Health](https://phpackages.com/badges/artaza-module-youtubelist/health.svg)](https://phpackages.com/packages/artaza-module-youtubelist)
```

###  Alternatives

[htmlburger/carbon-fields

WordPress developer-friendly custom fields for post types, taxonomy terms, users, comments, widgets, options and more.

1.5k665.2k57](/packages/htmlburger-carbon-fields)[tightenco/tlint

Tighten linter for Laravel conventions

5271.2M34](/packages/tightenco-tlint)[dflydev/placeholder-resolver

Given a data source representing key => value pairs, resolve placeholders like ${foo.bar} to the value associated with the 'foo.bar' key in the data source.

14414.6M3](/packages/dflydev-placeholder-resolver)[pear/pear

This is the definitive source of PEAR's core files.

1161.7M20](/packages/pear-pear)[pragmarx/ia-collection

Laravel Illuminate Agnostic Collection

473.4M2](/packages/pragmarx-ia-collection)[binarycabin/laravel-uuid

A wrapper for webpatser/laravel-uuid with additional integration

86589.4k](/packages/binarycabin-laravel-uuid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)