1 résultat trouvé pour video

Hello !

Voilà un petit tutoriel suite à une demande d'aide de Flitzz. On va voir comment ajouter une vidéo Youtube dans le QEEL du forum de manière à ne pas avoir à modifier les templates à chaque changement. Pour cela, on va se base sur cette technique.

Le rendu:

Prérequis :
• Avoir accès aux templates
• Ne pas être effrayée par le javascript
• Comprendre les bases du HTML / CSS

Je pars de templates non modifiés, pour toute question sur template modifié, tu peux me demander je t'expliquerai comment adapter.

Commençons pas le commun à toutes les versions

Ici, on va aller créer une page HTML qui contient notre vidéo. PA > Modules > Gestion des pages HTML > Créer en mode avancé.
Ici tu mets un titre, quelqu'il soit et tu colles ceci :

Code:

<div id="video">
  <object data="https://www.youtube.com/embed/FL-_fqJfAZ8">
  </object>
</div>

le lien est celui que tu retrouveras sur Youtube quand tu cliques sur "partager" > "intégrer" : c'est le lien que tu trouves dans le src=" ... "
Tu peux récupérer l'url de ta page HTML, tu vas en avoir besoin juste après =)


Dans Modules > Gestion des codes javascript. Tu crées un nouveau code que tu n'applique qu'à l'index.

Code:

$(document).ready(function(){
 $('#video-youtube').load('/h1-');
});

Il faut modifier le h1 par le hXX que tu as sur la page que tu as créés, c'est le lien de ta page HTML
Tu enregistres

A partir de maintenant, ça change selon la version. Prends bien les codes et explications relatifs à ta version


D'abord, on modifie le template Index_body.

Ici, on va d'abord chercher ceci :

Code:

<td class="catHead" colspan="2" height="28">

Et remplacer le 2 par 3

Code:

<td class="catHead" colspan="3" height="28">

Puis ici :

Code:

<tr>
 <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
 <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></td>
</tr>

On ajoute avant la fermeture du tr :

Code:


          <td class="row1" rowspan="6" align="center" valign="middle">  <div id="video-youtube"></div></td>


Ce qui donne :

Code:

<tr>
 <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
 <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></td>
          <td class="row1" rowspan="6" align="center" valign="middle">  <div id="video-youtube"></div></td>
 </tr>


Tu enregistre et tu publies.


Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Ici on va juste modifier la taille de notre vidéo :

Code:

#video object {
    height: 285px;
    width: 500px;
}


D'abord, on modifie le template Index_body.
Juste après :

Code:

<!-- BEGIN disable_viewonline -->

Tu colles ceci :

Code:

<div id="qeel">
  <div>

Et juste avant :

Code:

<!-- END disable_viewonline -->

Tu colles ceci :

Code:

 </div>
  <div id="video-youtube">
  </div>
</div>

Tu enregistres et tu publies

Ici j'ai ajouté un identifiant au qui est en ligne pour pouvoir le passer en "flex" et j'ai ajouté le contenant de la vidéo.


Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Pour le moment la vidéo est en dessous du QEEL, on va modifier ça :

Code:

#qeel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items:center;
  align-content:center;
  padding:10px;
}
#qeel > div:not(#video-youtube){
 width:100%;
}
#video object {
    height: 285px;
    width: 500px;
}


Tu peux changer la taille de la vidéo dans #video object

Tu enregistres et le tour est joué



D'abord, on modifie le template Index_body.
Juste après :

Code:

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">

Tu colles ceci :

Code:

<div id="qeel">
  <div>

Et juste après :

Code:

<!-- END switch_chatbox_activate -->

Tu colles ceci :

Code:

</div>
  <div id="video-youtube">
  </div>
</div>

Tu enregistres et tu publies

Ici j'ai ajouté un identifiant au qui est en ligne pour pouvoir le passer en "flex" et j'ai ajouté le contenant de la vidéo.


Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Pour le moment la vidéo est en dessous du QEEL, on va modifier ça :

Code:

#qeel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items:center;
  align-content:center;
  padding:10px;
}
#qeel > div:not(#video-youtube){
 width:100%;
}
#video object {
    height: 285px;
    width: 500px;
}


Tu peux changer la taille de la vidéo dans #video object

Tu enregistres et le tour est joué



D'abord, on modifie le template Index_body.

Ici, on va d'abord chercher ces 3 petites choses :

Code:

<th colspan="2">

Code:

<tfoot>
 <tr><td colspan="2"></td></tr>
 </tfoot>

Code:

<th colspan="2" class="formsubtitle">

Et remplacer le 2 par 3

Code:

<th colspan="3">

Code:

<tfoot>
 <tr><td colspan="3"></td></tr>
 </tfoot>

Code:

<th colspan="3" class="formsubtitle">

Puis ici :

Code:

<tr>
 <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
 <td class="row2">
 <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
 <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
 <div>{LEGEND} : {GROUP_LEGEND}</div>
 </td>
 </tr>

On ajoute avant la fermeture du tr :

Code:


                          <td class="row1" width="1%" rowspan="7"><div id="video-youtube"></div></td>


Ce qui donne :

Code:

<tr>
<td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
<td class="row2">
<div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
<div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
<div>{LEGEND} : {GROUP_LEGEND}</div>
</td>
                          <td class="row1" width="1%" rowspan="7"><div id="video-youtube"></div></td>
</tr>


Tu enregistre et tu publies.



Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Ici on modifie juste la taille de la vidéo :

Code:

#video object {
    height: 285px;
    width: 500px;
}

D'abord, on modifie le template Index_body.
Tu vas remplacer ceci :

Code:

{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
</div>

Par ceci :

Code:

<div id="qeel">
<div>
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
      </div>
<div id="video-youtube">
</div>
</div>
</div>

Ici j'ai ajouté un identifiant au qui est en ligne pour pouvoir le passer en "flex" et j'ai ajouté le contenant de la vidéo.

Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Pour le moment la vidéo est en dessous du QEEL, on va modifier ça :

Code:

#qeel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items:center;
  align-content:center;
  padding:10px;
}
#qeel > div:not(#video-youtube){
 width:100%;
}
#video object {
    height: 285px;
    width: 500px;
}

Pour cette version, on ne va pas mettre la vidéo à coté mais en dessous :
D'abord, on modifie le template Index_body.

Remplace ceci :

Code:

<!-- BEGIN disable_viewonline -->
<aside id="sidebar" class="sidebar-home">
    <div id="block-online" class="block-subtle">
        <i class="material-icons">assessment</i>
        <div>
            <span class="headline">{L_WHO_IS_ONLINE}</span>

            {TOTAL_USERS_ONLINE}<br /><br />
            {RECORD_USERS}<br />

            {LOGGED_IN_USER_LIST}<br />

            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS} <br />

            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

            <br />
            <em>{LEGEND} : {GROUP_LEGEND}</em>
        </div>
    </div>
</aside>
<!-- END disable_viewonline -->

Par ceci :

Code:

<!-- BEGIN disable_viewonline -->
<aside id="sidebar" class="sidebar-home">
    <div id="block-online" class="block-subtle">
        <i class="material-icons">assessment</i>
        <div>
            <span class="headline">{L_WHO_IS_ONLINE}</span>

            {TOTAL_USERS_ONLINE}<br /><br />
            {RECORD_USERS}<br />

            {LOGGED_IN_USER_LIST}<br />

            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS} <br />

            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

            <br />
            <em>{LEGEND} : {GROUP_LEGEND}</em>
        </div>
      <div id="video-youtube"></div>
    </div>
</aside>
<!-- END disable_viewonline -->

Ici j'ajoute juste le contenant de la vidéo


Un peu de mise en page à installer dans PA > Affichage > Couleurs > Feuille de style CSS.
Ici on modifie juste la taille de la vidéo :

Code:

#video object {
    height: 285px;
    width: 500px;
}

---

Et voilà, tu peux intégrer une vidéo dans ton QEEL ! Si tu as le moindre souci, n'hésite pas à demander de l'aide =)