app/templates/video.html

{% extends "base.html" %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="lg:col-span-1">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body p-4">
                <div class="aspect-video">
                    <iframe id="youtube-player" class="w-full h-full" 
                        src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&start={{ start_time }}{% if start_time > 0 %}&autoplay=1&mute=1{% endif %}" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    
    <div class="lg:col-span-1">
        <div class="card bg-base-100 shadow-xl sticky top-4">
            <div class="card-body">
                <div class="flex justify-between items-center">
                    <h2 class="card-title">Video Transcript</h2>
                </div>
                
                <div class="form-control mb-4">
                    <label class="label">
                        <span class="label-text">Search in transcript</span>
                    </label>
                    <div class="join w-full">
                        <input type="text" id="search-input" placeholder="Search in this video..." class="input input-bordered join-item w-full" />
                        <button id="search-button" class="btn btn-primary join-item">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            Search
                        </button>
                    </div>
                </div>
                
                <div id="loading" class="hidden mt-2 mb-2">
                    <span class="loading loading-spinner loading-md"></span>
                    <span class="ml-2">Searching...</span>
                </div>
                
                <div id="transcript-container" class="mt-2 transcript-container">
                    <!-- Transcript will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Store the video ID in a JavaScript variable
    const videoId = "{{ video_id }}";
</script>
<script src="{{ https_url_for('static', path='/js/video.js') }}"></script>
{% endblock %}