- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
[Toutes versions] Intégrer une vidéo au QEEL
Sam 3 Aoû 2019 - 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:
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
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>
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-');
});
Tu enregistres
A partir de maintenant, ça change selon la version. Prends bien les codes et explications relatifs à ta version
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">
- 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>
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 -->
- Code:
<div id="qeel">
<div>
- Code:
<!-- END disable_viewonline -->
- Code:
</div>
<div id="video-youtube">
</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.
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;
}
Tu enregistres et le tour est joué
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">
- Code:
<div id="qeel">
<div>
- Code:
<!-- END switch_chatbox_activate -->
- Code:
</div>
<div id="video-youtube">
</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.
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;
}
Tu enregistres et le tour est joué
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">
- 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>
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>
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 -->
- 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 -->
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 =)
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum