templates/default/video.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Video{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7.  <link rel="stylesheet"  href="{{ asset('css/video/video.css') }}" >
  8. {% endblock %}
  10. {% block body %}
  11. <style>
  12.    
  13. </style>
  15. <div class="body" style="">
  17.       <img src="{{ asset('back2.png') }}" style="  height:100vh; background-cover:center; width:100%; position:absolute; height:100%; bottom:0; top:0; right:0; left:0; width:100%;">
  19.         <div class="" style="padding:11px; background-color:white;  border-bottom: 3px solid #2c3e50; position:relative;">
  20.           <div class="container">
  21.                 <div style="display:inline-block"> 
  22.                    <a href="https://www.ues.ma/"><img src="{{ asset('profile.png') }}" style="height:45px;"></a>
  23.                 </div>
  25.                 <div style="float:right;"> 
  26.                   <a  href="#"><img src="{{ asset('splashf.png') }}" style="height:42px;"></a>
  27.                 </div>
  28.                 <div   style="position:absolute; left:43.5%; top:25%; font-weight:bold; border:1px solid #2c3e50; 
  29.                        padding:6px 10px; border-radius: 15px 0px 15px 0px; color:#2c3e50;">
  30.                    {# {{ adm }} #} adm
  31.                 </div>
  32.           </div>
  33.         </div>
  37. <div class="container mt-5">
  38.     <div class="row" >
  39.       <div class="col-xl-8 col-md-7 col-12" style="margin-bottom: 15px">
  40.            {# <video width="100%"  controls controlsList="nodownload"> #}
  41.            <video width="100%" autoplay="autoplay" loop="loop" controls="controls" controlsList="nodownload" playsinline src={{ "https://d1jsawlrokhcmg.cloudfront.net/" ~ video.video|replace({ ('+'): '/' }) | url_encode   }}   type="video/webm" />
  42.             {# <p class="p-description-video"> 
  43.                  Le Lorem Ipsum est simplement du faux texte employé dans la composition 
  44.             </p> #}
  46.             {# ------------------------------------------- accordian -------------------------------------------- #}
  48.             {# <div id="accordion" class="commantaire">
  49.                 <div class="card">
  50.                     <div class="card-header card-header-commentaire" data-toggle="collapse"   id="headingOne"  data-target="#collapseOne" >
  51.                         <p class="piece-joint" > <i class="fas fa-comments" style="margin-right: 5px;"> </i> Commentaires </p>
  52.                         <h5 class="mb-0 accordian-button" >
  53.                             <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  54.                             <i class="fas fa-plus" style="color: white"> </i>
  55.                             </button>
  56.                         </h5>
  57.                     </div>
  59.                     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  60.                     <div class="card-body">
  61.                         Anim pariatur cliche reprehenderit, enim eiusmod high lif
  62.                     </div>
  63.                     </div>
  64.                 </div>
  65.             </div> #}
  67.             {# ------------------------------------------------- accordian ------------------------------------- #}
  69.       </div>
  70.       <div class="col-xl-4 col-md-5 col-12 suggestion card-video">
  71.           
  72.          {# ------------------------------------------------- accordian ------------------------------------- #}
  74.         
  75.          <div id="accordion1" class="piece-joint-accordion">
  76.                 <div class="card">
  77.                     <div class="card-header card-header-pieces-jointe" data-toggle="collapse"   id="headingOne"  data-target="#collapseToo" >
  78.                         <p class="piece-joint" > <i class="fas fa-file" style="margin-right: 5px;"> </i> Pieces joints</p>
  79.                         <h5 class="mb-0 accordian-button" >
  80.                             <button class="btn btn-link" data-toggle="collapse" data-target="#collapseToo" aria-expanded="true" aria-controls="collapseOne">
  81.                             <i class="fas fa-plus" style="color: white"> </i>
  82.                             </button>
  83.                         </h5>
  84.                     </div>
  86.                     <div id="collapseToo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion1">
  87.                     <div class="card-body">
  88.                           <div class="row">
  89.                              
  90.                                 
  91.                                         {% if  video.piece is not empty %}
  92.                                                 
  93.                                             {% set pieces = video.piece | split('|') %}
  95.                                             {% for piece in pieces %}
  96.                                                         
  97.                                                     {% set exts = piece |split('.') %}
  98.                                                     {% set name = piece |split('!!') %}
  99.                                                         
  100.                                                     {% if piece != null %}
  102.                                                         <div class="col-xl-2"  style="padding-left: 30px;">
  103.                                                             {# <i class="fas fa-file" style="font-size: 17px; margin-top: 4px; color:#F7A326;"> </i> #}
  104.                                                         
  105.                                                             <a href="{{ asset('uploads/' ~ piece ) }}" target="_blank" id="PJ">
  106.                                                                 {% if  exts[1] |lower  == 'tif' or  exts[1] |lower  == 'png' or exts[1] |lower  == 'jpg' or exts[1] |lower  == 'gif' or exts[1] |lower  == 'jpeg' or exts[1] |lower  == 'tiff' %}
  107.                                                                     <i class="fa fa-file-image icon-file" style="color:#717171;"></i> 
  108.                                                                 {% elseif exts[1] |lower == 'pdf' %}
  109.                                                                     <i class="fa fa-file-pdf icon-file"  style="color:#AC1D19;" ></i>   
  110.                                                                 {% elseif exts[1] |lower == 'xlsx' or exts[1] |lower == 'xlsx' or exts[1] |lower == 'xlsm' or exts[1] |lower == 'xlsb' or exts[1] |lower == 'xls' or exts[1] |lower == 'xlam' %}
  111.                                                                     <i class="fa fa-file-excel icon-file" style="color:green;"></i>  
  112.                                                                 {% else %}      
  113.                                                                 <i class="fa fa-file icon-file" style="color:#F7A326;" ></i>           
  114.                                                                 {% endif %} 
  115.                                                             </a>
  116.                                                         </div>
  118.                                                         <div class="col-xl-10">
  119.                                                              {% set Singlename = name[1] |split('.') %}
  120.                                                             <p> {{ Singlename[0] ~ '.' ~ Singlename[1] |lower }} </p>
  121.                                                         </div>
  123.                                                     {% endif %}
  124.                                                             
  125.                                             {% endfor %}
  126.                                                                                             
  127.                                         {% endif %}
  129.                             </div>
  131.                             {# --------------------------------------- row ---------------------------------------------- #}
  133.                           
  134.                            {# 
  135.                             <div class="row">
  136.                                 <div class="col-xl-2"  style="padding-left: 30px;">
  137.                                     <i class="fas fa-file-excel" style="font-size: 17px; margin-top: 4px; color:green;"> </i>
  138.                                 </div>
  140.                                 <div class="col-xl-10">
  141.                                     <p> Anim pariatur cliche reprehenderit enim eiusmod high lif </p>
  142.                                 </div>
  143.                             </div>
  145.                             <div class="row">
  146.                                 <div class="col-xl-2"  style="padding-left: 30px;">
  147.                                     <i class="fas fa-file-image" style="font-size: 17px; margin-top: 4px; color:#717171;"> </i>
  148.                                 </div>
  150.                                 <div class="col-xl-10">
  151.                                     <p> Anim pariatur cliche reprehenderit enim eiusmod high lif </p>
  152.                                 </div>
  153.                             </div>
  155.                             <div class="row">
  156.                                 <div class="col-xl-2"  style="padding-left: 30px;">
  157.                                     <i class="fas fa-file-pdf" style="font-size: 17px; margin-top: 4px; color:#AC1D19;"> </i>
  158.                                 </div>
  160.                                 <div class="col-xl-10">
  161.                                     <p> Anim pariatur cliche reprehenderit enim eiusmod high lif </p>
  162.                                 </div>
  163.                             </div>*
  164.                           
  165.                            #}
  168.                        </div>
  169.                     </div>
  170.                 </div>
  171.             </div>
  173.          
  174.           
  175.         {# ------------------------------------------------- accordian ------------------------------------- #}
  177.         
  178.       </div>
  179.     </div>
  180. </div> 
  182. </div>
  186. {% endblock %}