Catégories à fermer


Aller en bas
Mäven
Informations : Idea Viens papoter avec nous sur le discord

Messages : 1098
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

[Toutes versions] Intégrer une vidéo au QEEL  Empty [Toutes versions] Intégrer une vidéo au QEEL

le Sam 3 Aoû - 11:16

Intégrer une vidéo au QEEL


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:
[Toutes versions] Intégrer une vidéo au QEEL  Rendu11

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

Exclamation 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 Smile
On prépare la vidéo dans une page HTML

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>
Idea 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=" ... " Smile
Arrow Tu peux récupérer l'url de ta page HTML, tu vas en avoir besoin juste après =)

Du javascript

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-');
});
Idea 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 Smile
Tu enregistres Smile

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

Modifions le template

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 Smile
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.

Et de la CSS

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;
}

PhpBB3

Modifions le template

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 Smile

Arrow 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.

Et de la CSS

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;
}
Arrow Tu peux changer la taille de la vidéo dans #video object

Tu enregistres et le tour est joué Smile

PunBB

Modifions le template

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 Smile

Arrow 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.

Et de la CSS

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;
}
Arrow Tu peux changer la taille de la vidéo dans #video object

Tu enregistres et le tour est joué Smile

Invision

Modifions le template

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 Smile
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.


Et de la CSS

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;
}

ModernBB

Modifions le template

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>
Arrow 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.
Et de la CSS

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;
}

AwesomeBB

Modifions le template

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} :&nbsp;{GROUP_LEGEND}</em>
        </div>
      <div id="video-youtube"></div>
    </div>
</aside>
<!-- END disable_viewonline -->
Arrow Ici j'ajoute juste le contenant de la vidéo Wink

Et de la CSS

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 =)


Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne a nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @