templates/dashboard_free/lesson-video.html.twig line 1

Open in your IDE?
  1. {% extends 'dashboard_free/layout.html.twig' %}
  2. {% block head %}
  3.   <meta name="description" content="{{ video.metaDescription }}" />
  4.   <title>{{ find.title }} - Les Bons Profs</title>
  5.   <link rel="canonical" href="{{ base_url_front }}{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />
  7.   <!--Tags Facebook-->
  8.   <meta property="og:url"                content="{{ base_url_front }}{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />
  9.   <meta property="og:type"               content="website" />
  10.   <meta property="og:title"              content="{{ find.title }} - Les Bons Profs" />
  11.   <meta property="og:description"        content="{{ video.metaDescription }}" />
  12.   <meta property="og:image"              content="{{ base_url_front }}/static/img/dashboard-free/eleve-cours-gratuit.webp" />
  13.   <script type="application/ld+json">
  14.     {
  15.         "@context": "https://schema.org",
  16.               "@type": "VideoObject",
  17.               "name": "{{ course.title|capitalize }}",
  18.               "description": "{% if find.metadescription is not null %}{{ find.metadescription }}{% else %}Cours de {% if find %}{{ find.notion.library.discipline.title }}{% endif %} pour {{ course.title }} : vidéos pédagogiques, exercices corrigés et méthodologie. Par Les Bons Profs.{% endif %}",
  19.               "thumbnailUrl": "https://img.youtube.com/vi/{{ video.videoId }}/maxresdefault.jpg",
  20.               "uploadDate": "2025-06-16",
  21.               "duration": "{{ video.durationYoutube }}",
  22.               "contentUrl": "https://www.youtube.com/embed/{{ video.videoId }}",
  23.               "embedUrl": "https://www.youtube.com/embed/{{ video.videoId }}",
  24.               "publisher": {
  25.         "@type": "Organization",
  26.                 "name": "Les Bons Profs",
  27.                 "logo": {
  28.           "@type": "ImageObject",
  29.                   "url": "https://lesbonsprofs.com/static/img/dashboard-free/les-bons-profs-logo.svg"
  30.         }
  31.       },
  32.         "teachingMode": "online",
  33.               "educationalLevel": "{{ course.title|capitalize }}",
  34.               "inLanguage": "fr",
  35.               "learningResourceType": "VideoLesson",
  36.               "isAccessibleForFree": true,
  37.               "offers": {
  38.         "@type": "Offer",
  39.                 "price": "0",
  40.                 "priceCurrency": "EUR",
  41.                 "availability": "https://schema.org/InStock"
  42.       }
  43.     }
  44.   </script>
  45. {% endblock %}
  46. {% block content %}
  48.   <!-- Popup -->
  49.   <div x-cloak>
  50.     <!-- Fond noir transparent flouté -->
  51.     <div x-show="open"
  52.          x-transition:enter="transition ease-out duration-300"
  53.          x-transition:enter-start="opacity-0"
  54.          x-transition:enter-end="opacity-100"
  55.          x-transition:leave="transition ease-in duration-200"
  56.          x-transition:leave-start="opacity-100"
  57.          x-transition:leave-end="opacity-0"
  58.          class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
  59.          @click="open = false">
  61.       <!-- Contenu du popup -->
  62.       <div class="fixed inset-0 z-50 flex items-center justify-center">
  63.         <div class="flex flex-col items-center bg-white border-8 border-miel rounded-lg p-4 sm:p-6 max-w-lg mx-4" @click.stop>
  64.           <!-- Contenu à personnaliser -->
  65.           <p class="text-2xl text-bleu font-bold text-center mb-4">Tous nos cours en ligne en accès gratuit</p>
  66.           <img src="{{ base_url }}/static/img/dashboard-free/hibou-popup1.webp" alt="Tous nos cours en ligne en accès gratuit" class="w-40 z-10">
  67.           <div class="flex justify-between bg-miel text-bleu font-bold rounded-lg columns-2 w-full sm:w-[90%] p-4 sm:p-5 -mt-[14px]">
  68.             <ul>
  69.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="Vidéos" class="w-4 sm:w-5 mr-1">Vidéos</li>
  70.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="Fiches" class="w-4 sm:w-5 mr-1">Fiches</li>
  71.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="QCM" class="w-4 sm:w-5 mr-1">QCM</li>
  72.             </ul>
  73.             <ul>
  74.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="Exercices corrigés" class="w-4 sm:w-5 mr-1">Exercices corrigés</li>
  75.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="Méthodologie" class="w-4 sm:w-5 mr-1">Méthodologie</li>
  76.               <li class="flex items-baseline"><img src="{{ base_url }}/static/img/dashboard-free/coche-grenat.webp" alt="Compte parent" class="w-4 sm:w-5 mr-1">Compte parent</li>
  77.             </ul>
  78.           </div>
  79.           <p class="text-lg sm:text-2xl text-bleu text-center font-bold mt-4">
  80.             Inscrivez-vous gratuitement
  81.           </p>
  82.           <p class="text-lg sm:text-xl text-center">
  83.             pour accéder à tous nos cours en ligne
  84.           </p>
  85.           <p class="flex text-lg sm:text-xl text-bleu font-bold">
  86.             pendant 7 jours <img src="{{ base_url }}/static/img/dashboard-free/emphase-miel-dr.webp" alt="Inscrivez-vous gratuitement" class="w-[24px] mt-[12px]">
  87.           </p>
  88.           <a href="{{ base_url_front }}/nos-offres/" class="bg-miel hover:bg-grenat text-bleu hover:text-white text-lg sm:text-xl font-bold py-2 px-4 rounded-full transition-colors mt-4">
  89.             Obtenir mon accès gratuit
  90.           </a>
  91.           <p class="text-base sm:text-xl mt-4">Déjà un compte ?
  92.             <a href="{{ url("app_login") }}" class="text-bleu hover:text-grenat">Je me connecte</a>
  93.           </p>
  94.         </div>
  95.       </div>
  96.     </div>
  97.   </div>
  99.   <!-- Fil d'arianne -->
  100.   <div class="flex justify-center px-5 pt-[80px] md:pt-[100px]">
  101.     <div class="text-[14px] w-[1160px]">
  102.       <a href="https://www.lesbonsprofs.com/" class="text-bleu"><span class="text-[21px]">⌂</span> Accueil</a> » <a href="" class="text-bleu">Terminale</a> » <a href="" class="text-bleu">Philosophie</a> » Vidéo Le bonheur
  103.     </div>
  104.   </div>
  106.   <!-- Bloc Contenu -->
  107.   <section class="flex justify-center px-5 pt-[120px]">
  109.     <div class="flex flex-col md:flex-row w-[1160px] relative">
  110.       <!-- Menu gauche -->
  111.       <aside id="menu-gauche" class="w-full md:w-[275px] absolute bg-rose md:bg-inherit mb-5 md:mb-0">
  113.         {% include 'dashboard_free/menu-gauche.html.twig' %}
  115.         <div class="hidden md:flex flex-col justify-center text-center text-sm items-center border-2 border-miel rounded-lg gap-4 my-5 py-5">
  116.           <img src="{{ base_url }}/static/img/dashboard-free/hibou-bons-profs.webp" alt="Les bons profs - Cours gratuits" class="w-20" />
  117.           <p>
  118.             Envie de tester gratuitement nos vidéos de cours enrichies de jeux interactifs ?
  119.           </p>
  120.           <a href="#" class="block bg-grenat hover:bg-bleu text-white py-2 px-4 rounded-full text-center transition-colors">
  121.             J'essaie gratuitement
  122.           </a>
  123.           <p>Déjà un compte ? <a href="" class="text-bleu hover:text-grenat">Je me connecte</a> </p>
  124.         </div>
  126.       </aside>
  129.       <!-- Partie droite -->
  130.       <section class="md:ml-[300px] md:w-[calc(100%-275px)]">
  132.         <div class="mb-4">
  133.           <!-- En-têtes des onglets -->
  134.           <div class="flex gap-1">
  135.             <button class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-white bg-lavande rounded-t-lg w-full" data-tab="video">
  136.               Vidéo
  137.             </button>
  138.             <button @click.prevent="open = true" class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-lavande bg-lavandePastel hover:text-bleu rounded-t-lg w-full" data-tab="fiche">
  139.               Fiche
  140.             </button>
  141.             <button @click.prevent="open = true" class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-lavande bg-lavandePastel hover:text-bleu rounded-t-lg w-full" data-tab="qcm">
  142.               QCM
  143.             </button>
  144.             <button @click.prevent="open = true" class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-lavande bg-lavandePastel hover:text-bleu rounded-t-lg w-full" data-tab="exercice">
  145.               Exercice
  146.             </button>
  147.             <button @click.prevent="open = true" class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-lavande bg-lavandePastel hover:text-bleu rounded-t-lg w-full" data-tab="annale">
  148.               Annale Bac
  149.             </button>
  150.             <button @click.prevent="open = true" class="md:px-4 py-2 text-[3vw] sm:text-[2.5vw] md:text-sm font-bold text-lavande bg-lavandePastel hover:text-bleu rounded-t-lg w-full" data-tab="carte">
  151.               Carte mentale
  152.             </button>
  153.           </div>
  155.           <!-- Contenu des onglets -->
  156.           <div class="pt-4 md:p-4">
  157.             <div id="video" class="tab-panel text-justify">
  158.               <h1 class="font-bold capitalize text-2xl my-3">{{ video.title }}</h1>
  159.               {#<video controls class="w-full"></video>#}
  160.               <iframe class="w-full mb-4" height="442"
  161.                       src="https://www.youtube.com/embed/{{ video.videoId }}?controls=0">
  162.               </iframe>
  163.               {#<h2 class="font-bold text-xl my-3">Sous-titre</h2>#}
  164.               <iframe class="w-full mb-4" id="description-video-iframe"
  165.                       style="min-height: 200px" scrolling="no"
  166.                       src="{{ url('app_front_dashboard_descripyion_video',{'videoSlug':video.slug}) }}"></iframe>
  167.           </div>
  168.         </div>
  170.         <div class="flex md:hidden justify-center">
  171.           <div class="flex flex-col justify-center text-center text-sm items-center border-2 border-miel rounded-lg gap-4 my-5 py-5 w-[275px]">
  172.             <img src="/static/img/dashboard-free/hibou-bons-profs.webp" alt="Les bons profs - Cours gratuits" class="w-20" />
  173.             <p>
  174.               Envie de tester gratuitement nos vidéos de cours enrichies de jeux interactifs ?
  175.             </p>
  176.             <a href="#" class="block bg-grenat hover:bg-bleu text-white py-2 px-4 rounded-full text-center transition-colors">
  177.               J'essaie gratuitement
  178.             </a>
  179.             <p>Déjà un compte ? <a href="" class="text-bleu hover:text-grenat">Je me connecte</a> </p>
  180.           </div>
  181.         </div>
  182.       </section>
  184.     </div>
  186.   </section>
  187.   <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML-full"></script>
  188.   <script type="text/x-mathjax-config">
  189.     MathJax.Hub.Config({
  190.       extensions: ["tex2jax.js"],
  191.       jax: ["input/TeX", "output/HTML-CSS"],
  192.       tex2jax: {
  193.         inlineMath: [ ['$','$'], ["\\(","\\)"] ],
  194.         displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
  195.         processEscapes: true
  196.       },
  197.       "HTML-CSS": { fonts: ["TeX"] }
  198.     });
  199.   </script>
  200.   <script type="text/javascript">
  201.     document.addEventListener('DOMContentLoaded', function() {
  202.       // Fonction pour recevoir la hauteur depuis l'iframe
  203.       window.addEventListener('message', function(e) {
  204.         const iframe = document.getElementById('description-video-iframe');
  205.         if (iframe && e.data.type === 'setHeight') {
  206.           iframe.style.height = e.data.height + 'px';
  207.         }
  208.       });
  209.     });
  211.   </script>
  212. {% endblock %}