Embedding YouTube (and any video) in your Chatbot

The Recommended Library: react-player

• Supports YouTube, Vimeo, Twitch, direct .mp4/.webm, and more - all with the same API
• Works in Next.js with a simple dynamic import
• Easily detects video URLs and auto-selects the right player

Part 1: Next.js (Web)

Step 1 - Install

npm install react-player

Step 2 - Create a VideoPlayer component

// components/VideoPlayer.tsx
'use client';

import dynamic from 'next/dynamic';

const ReactPlayer = dynamic(() => import('react-player/lazy'), {
  ssr: false,
  loading: () => (
    <div className="video-placeholder">Loading player...</div>
  ),
});

interface VideoPlayerProps {
  url: string;
}

export default function VideoPlayer({ url }: VideoPlayerProps) {
  return (
    <div className="video-wrapper" style={{ position: 'relative', paddingTop: '56.25%' }}>
      <ReactPlayer
        url={url}
        controls
        width="100%"
        height="100%"
        style={{ position: 'absolute', top: 0, left: 0 }}
        config={{
          youtube: {
            playerVars: { showinfo: 1 },
          },
        }}
      />
    </div>
  );
}

Step 3 - Use it in your chatbot message renderer

// components/ChatMessage.tsx
'use client';

import VideoPlayer from './VideoPlayer';

function isVideoUrl(text: string): boolean {
  return (
    text.startsWith('https://www.youtube.com/') ||
    text.startsWith('https://youtu.be/') ||
    text.startsWith('https://vimeo.com/') ||
    /\.(mp4|webm|ogg)$/i.test(text)
  );
}

export default function ChatMessage({ content }: { content: string }) {
  if (isVideoUrl(content.trim())) {
    return <VideoPlayer url={content.trim()} />;
  }

  return <p>{content}</p>;
}

Step 4 - Allow YouTube in next.config.js

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            // Permit YouTube iframes
            value: "frame-src 'self' https://www.youtube.com https://player.vimeo.com;",
          },
        ],
      },
    ];
  },
};
module.exports = nextConfig;

Part 2: React Native (Mobile)

Install

npm install react-native-youtube-iframe
# For general video support later:
npm install react-native-video

YouTube player component

// components/VideoPlayer.native.tsx
import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

function extractYouTubeId(url: string): string | null {
  const match = url.match(
    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
  );
  return match ? match[1] : null;
}

interface VideoPlayerProps {
  url: string;
}

export default function VideoPlayer({ url }: VideoPlayerProps) {
  const videoId = extractYouTubeId(url);

  if (!videoId) return null;

  return (
    <View style={styles.container}>
      <YoutubePlayer
        height={220}
        videoId={videoId}
        play={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    borderRadius: 8,
    overflow: 'hidden',
  },
});

Use it in your chat message renderer

// components/ChatMessage.native.tsx
import React from 'react';
import { Text } from 'react-native';
import VideoPlayer from './VideoPlayer.native';

function isYouTubeUrl(text: string): boolean {
  return (
    text.includes('youtube.com/watch') ||
    text.includes('youtu.be/')
  );
}

export default function ChatMessage({ content }: { content: string }) {
  if (isYouTubeUrl(content.trim())) {
    return <VideoPlayer url={content.trim()} />;
  }
  return <Text>{content}</Text>;
}

Extending to Any Video (Future-proofing)

Quick Summary

1. Next.js: Install react-player, wrap it in a dynamic import with ssr: false, drop <VideoPlayer url={...} /> into your chat message renderer.
2. React Native: Install react-native-youtube-iframe, extract the video ID from the URL, render <YoutubePlayer videoId={...} />.
3. Both approaches use the same pattern: detect a video URL in the chat message -> swap in the player component.
4. react-player on web already handles virtually any video source, so "any video" support is free on Next.js.