Wappler YouTube Player

A Wappler App Connect component that provides an easy way to embed and control YouTube videos within a modal dialog.

Author: Ben Pleysier

Features

• Simple Integration: Easy-to-use App Connect component for embedding YouTube videos
• Modal Dialog: Automatically displays videos in a Bootstrap 5 modal
• Dynamic Content: Support for dynamic video IDs and titles
• Event Handling: Built-in event system for player state changes
• Vanilla JavaScript: Pure JavaScript implementation without jQuery dependency
• Full App Connect Support: Complete data binding and expression support

Installation

1. Install as per Wappler Extension Guidelines

https://community.wappler.io/t/how-to-install-custom-wappler-extensions/49982

2. Restart Wappler

After installation, you must restart Wappler for it to recognize the new extension.

1. Save all your work
2. Close Wappler completely
3. Reopen Wappler
4. Open your project

3. Verify Installation

After restart, the component should appear in the Wappler IDE:

1. Open any page in design view
2. Click the "+" button to add a component
3. Look for "YouTube Player" in the Components panel
4. You should see "YouTube Player: @@id@@" in the component list

Usage

Basic Usage

<dmx-youtube-player id="player1" videoid="dQw4w9WgXcQ" videotitle="My Video"></dmx-youtube-player>

With Dynamic Bindings

<dmx-youtube-player 
  id="player1" 
  dmx-bind:videoid="selectedVideo.videoId"
  dmx-bind:videotitle="selectedVideo.title">
</dmx-youtube-player>

Component Properties

• id (required): Unique identifier for the player component
• videoid: YouTube video ID to play
• videotitle: Title of the video (displayed in modal header)

Component Methods

• changeText(value): Update the player's value dynamically

Component Events

• updated: Fired when the player's value is updated

  <dmx-youtube-player 
    id="player1" 
    dmx-on:updated="handlePlayerUpdate()">
  </dmx-youtube-player>

Dependencies

• Bootstrap 5: The component uses Bootstrap 5 modal dialogs
• Wappler App Connect: Requires Wappler's App Connect framework
• YouTube IFrame API: Automatically loaded from Google's CDN

Browser Support

Works in all modern browsers that support:

• ES6+ JavaScript
• HTML5 Video API
• YouTube IFrame API
• Bootstrap 5

File Structure

wappler-youtube-player/
├── package.json
├── README.md
├── LICENSE.md
├── app_connect/
│   └── components.hjson       # Component definition
└── includes/
    └── dmx-youtube-player.js  # Component implementation

Component Integration

The component is automatically integrated into Wappler and appears in the component picker under Components > YouTube Player.

Properties Panel

When added to a page, you can configure:

• Video ID: YouTube video identifier
• Video Title: Display title for the modal

Actions

• Set Value: Change the component's value dynamically

Technical Details

• Built as a custom Web Component
• Uses YouTube IFrame API for video embedding
• Integrates with Bootstrap 5 modal system
• Full App Connect data binding support
• Pure vanilla JavaScript (no jQuery dependency)

Examples

Display a Video

<dmx-youtube-player 
  id="myPlayer" 
  videoid="9bZkp7q19f0" 
  videotitle="Tutorial Video">
</dmx-youtube-player>

Trigger Player Update

<button dmx-on:click="myPlayer.changeText('New Value')">Update</button>

Listen to Player Events

<dmx-youtube-player 
  id="myPlayer" 
  dmx-on:updated="handlePlayerUpdate()">
</dmx-youtube-player>

Dynamic Video Selection

<!-- Data store with videos -->
<dmx-value id="videos" dmx-bind:value="[
  {id: 'dQw4w9WgXcQ', title: 'Video 1'},
  {id: '9bZkp7q19f0', title: 'Video 2'}
]"></dmx-value>

<!-- Video selection -->
<select id="videoSelect" dmx-on:change="myPlayer.changeText(videos.value[videoSelect.value].id)">
  <option dmx-repeat:idx="videos.value" dmx-bind:value="idx">{{videos.value[idx].title}}</option>
</select>

<!-- Player -->
<dmx-youtube-player 
  id="myPlayer" 
  dmx-bind:videoid="videos.value[0].id"
  dmx-bind:videotitle="videos.value[0].title">
</dmx-youtube-player>

Troubleshooting

Component Not Showing in Wappler

Solution:

1. Verify the package was installed: check your extensions directory
2. Make sure Wappler is completely closed and restarted
3. Clear Wappler cache if needed

Videos Not Playing

Solution:

1. Verify the YouTube video ID is correct
2. Ensure the video is publicly available or properly licensed
3. Check browser console for any CORS or API errors
4. Confirm YouTube IFrame API is loaded

Modal Not Opening

Solution:

1. Ensure Bootstrap 5 is properly loaded in your project
2. Verify the modal element is in the DOM
3. Check browser console for JavaScript errors

Performance Tips

1. ✅ Lazy load videos only when needed
2. ✅ Use dynamic video IDs for flexibility
3. ✅ Cache video metadata in data stores
4. ✅ Consider using event delegation for multiple players

Requirements

• Wappler: 5.x or higher
• Bootstrap: 5.x
• Modern Browser: With ES6+ support

License

MIT License - see LICENSE.md for details

Support

For issues or questions:

• Check the troubleshooting section above
• Visit the Wappler Community Forum

Changelog

Version 1.0.3

• Bug Fix: Added CSS rule to prevent the hidden video modal from adding to the page scroll height (.modal:not(.show){overflow:hidden;height:0})

Version 1.0.2

• Added comprehensive README with installation instructions
• Added LICENSE.md file
• Enhanced package.json with metadata and file listings
• Improved documentation with examples and troubleshooting
• Author attribution added

Version 1.0.1

• Bug Fix: Fixed jQuery dependency in dmx-youtube-player.js - the component now uses vanilla JavaScript instead of jQuery, improving performance and reducing dependencies.

Version 1.0.0

• Initial release