Почему не фильтрует и открывает видео?

Question

lord amotar @lord_amotar

интернет магазин

Django

Почему не фильтрует и открывает видео?

2 ошибки
фильтр выводит категории но не фильтрует
выводит видео но н кликабельно

<section id="portfolio" class="portfolio section">
  
        <div class="container">
  
          <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">                
            <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
              <li data-filter="*" class="filter-active">All</li>
              {% for project in projects %}

              <li data-filter=".filter-app">
                {% for category in project.categories.all %}
                    {{ category.name }}{% if not forloop.last %}, {% endif %}
                {% endfor %}
                </li>
                {% endfor %}
            </ul><!-- End Portfolio Filters -->
  
            <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
                {% for project in projects %}
                <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
                    <div class="portfolio-content h-100">
                        {% if project.images %}
                            <img src="{{ project.images.url }}" alt="{{ project.title }}" class="img-fluid">
                        {% endif %}
            
                        {% if project.video_url %}
                            <div class="video-container mt-3">
                                <iframe 
                                    width="560" 
                                    height="315" 
                                    src="{{ project.video_url | youtube_embed }}" 
                                    frameborder="0" 
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                    allowfullscreen>
                                </iframe>
                            </div>
                        {% endif %}
            
                        <div class="portfolio-info mt-3">
                            <h3>{{ project.title }}</h3>
            
                     <!--       <ul class="category-list">
                                {% for category in project.categories.all %}
                                    <li>{{ category.name }}</li>
                                {% endfor %}
                            </ul> -->
            
                            <p>{{ project.description }}</p>
            
                            {% if project.images %}
                            <a href="{{ project.images.url }}" 
                               title="{{ project.title }}" 
                               data-gallery="portfolio-gallery-product" 
                               class="glightbox preview-link">
                                <i class="bi bi-zoom-in"></i>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div><!-- End Portfolio Item -->
                {% endfor %}
            </div>
        </div><!-- End Portfolio Container -->
  
          </div>
  
        </div>
  
      </section><!-- /Portfolio Section -->
{% endblock %}
<!-- Isotope JS -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<!-- Glightbox CSS и JS -->
<link href="https://cdn.jsdelivr.net/npm/glightbox@3.0.9/dist/css/glightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/glightbox@3.0.9/dist/js/glightbox.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Инициализация Isotope
        var iso = new Isotope('.isotope-container', {
            itemSelector: '.isotope-item',
            layoutMode: 'masonry'
        });

        // Фильтрация элементов
        var filters = document.querySelectorAll('.portfolio-filters li');
        filters.forEach(function (filter) {
            filter.addEventListener('click', function () {
                filters.forEach(f => f.classList.remove('filter-active'));
                this.classList.add('filter-active');
                let filterValue = this.getAttribute('data-filter');
                iso.arrange({ filter: filterValue });
            });
        });

        // Инициализация Glightbox
        const lightbox = GLightbox({ selector: '.glightbox' });
    });
</script>