Image de fond animée .mp4 [invision]

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image de fond animée .mp4 [invision]

Message par 4ki Sam 17 Fév 2018 - 21:30

Bonjour à tous, je viens de me lancer dans l'administration d'un forum (pour une communauté multigaming)

J'aurai besoin de conseils sur plusieurs points... Crying or Very sad

Voici le liens du nouveau forum : https://www.lc4-team.com


Mon but est d'essayer de placer une "vidéo" en boucle à la place de l'image de fond background... Car j'ai essayé de mettre un .gif, créé sur photoshop, mais même compréssé, il pèse encore 1Mo, donc le chargement de la page est trop longue et pèse 2.6Mo Shocked

J'ai fais un test de ma page d'accueil avec le site : https://www.dareboost.com

J'ai beaucoup de chose à régler ou optimiser apparemment pour être dans les clous... (je ferai d'autre post pour avoir des conseils sur d'autre points) Mais pour le moment j'aimerai savoir s'il est possible, de mettre ma vidéo très courte en .mp4 à la place d'un .gif (conseil de dareboost). Ils parlent de balises :
Code:
<video loop="loop" poster="jaquette_video.jpg">
  <source src="video.mp4" type="video/mp4"></video>

Mais n'étant pas un super crack du code, ou pourrai je placer ce code pour avoir le rendu désiré ? Et je vais surement devoir modifié le CSS également il me semble... Quelques petits conseils ne serai pas de trop ^^

voici le lien de la vidéo .mp4 (qui pèse pour l'instant 316ko mais il est possible de la compressée un peu plus il me semble) que j'aimerai mettre : http://www.k-upload.fr/afficher-video-2018-02-17-1da006f4dtestanimatio.mp4.html

J'ai mis mon fichier .css en pièce jointe si cela peux vous aider.

Merci à tous les codeurs de la communauté qui se pencheront sur mon problème Smile

Amicalement
Fichiers joints
Image de fond animée .mp4 [invision] Attachment
20180217_2035-CSS-(www.lc4-team.com).zip Vous n'avez pas la permission de télécharger les fichiers joints.(7 Ko) Téléchargé 2 fois
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par 4ki Dim 18 Fév 2018 - 20:32

UP ! (personne pour me donner un coup de pouce ? Embarassed )
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par Adam_sfp Lun 19 Fév 2018 - 18:57

Bonsoir

Vous pouvez essayer ceci

Affichage -->Template -> général
Dans le template Overall_header

Après la balise body qui doit ressembler à cette ligne
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Mettre le code HTML pour votre vidéo.
Code:

<!-- Start Video -->
<video autoplay loop id="video-background" muted plays-inline>
  <source src="http://www.k-upload.fr/download.php?typefile=video&url=vide_2018-02-17-1da006f4dtestanimatio.mp4" type="video/mp4">
</video>
     <!-- End Video -->
Enregistrez et n'oubliez pas de valider le template

Puis ajouter dans votre CSS
Code:

/*  Start Video Background  */
#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}
/*  End Video Background  */

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par 4ki Lun 19 Fév 2018 - 19:36

Bonsoir Adam, merci énormément de vous être penché sur mon soucis... je m’y attelle demain dans la journée, et vous ferai un retour. Encore merci ! Amicalement
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par 4ki Mer 21 Fév 2018 - 13:24

Bonjour, donc j'ai regardé un peu ce template "Overall_header", dois je mettre le code juste en dessous de la balise <body> ? Ce n'est pas exactement le même que sur votre exemple, donc j'ai peur de faire une erreur...

Je vous poste mon code à partir de la balise <body> :

Code:
<body>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
 <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" class="module borderwrap" style="z-index: 10000 !important;">
 <div id="login_popup_content">
 <div id="login_popup_background">
 <div id="login_popup_title" class="maintitle"><h3>{SITENAME}</h3></div>
 <div class="box-content">
 {LOGIN_POPUP_MSG}
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get" target="_parent">
 <input type="submit" class="button" value="{L_LOGIN}" />
 <input type="button" class="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 </div>
 </div>
</div>
<!-- END switch_login_popup -->

<div class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">

 <div id="ipbwrapper">

 <a id="top" name="top" accesskey="t"></a>

 <div id="logostrip" class="clearfix">
 <a href="{U_PORTAL}" id="logo" title="{L_INDEX}"><img src="{LOGO}" alt="{L_INDEX}" /></a>
 <!-- BEGIN switch_h1 -->
 <div id="main-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p id="site-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>

 <div id="submenu">
 <ul>
 <li class="clearfix">{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 <!-- BEGIN switch_user_logged_in -->
 <div id="userlinks" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li class="last"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 </ul>
 <p>{LOGGED_AS}.</p>
 </div>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_out -->
 <div id="userlinks" class="not-connected clearfix">
 <span class="guest">{L_NOT_CONNECTED}</span> <span>{L_LOGIN_REGISTER}</span>
 </div>
 <!-- END switch_user_logged_out -->

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <div class="module borderwrap">
 <div class="box-content">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <div class="module borderwrap">
 <div class="box-content">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="container">
 <div id="content">

 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="main">
 <div id="main-content">

edit : J'ai essayé de le placer juste après cette balise et ça ne fonctionne pas... Mais je pense aussi que mon lien d'hébergement n'est pas valide... J'ai peut être tort, mais il me semble que le lien de la vidéo doit être en .mp4 et sur cet hébergeur le lien direct fini par .mp4.html

connaissez vous un hébergeur vidéo qui fourni des liens en .mp4 ?

Sinon puis je l'hébergé par exemple sur youtube et modifié le code, pour qu'elle tourne en boucle comme un .gif en fond ?

Désolé j'essaie de comprendre le fonctionnement Rolling Eyes ce n'est pas évident ^^
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par Adam_sfp Mer 21 Fév 2018 - 17:29

Bonjour

Oui vous mettez le code HTML après
Code:
<body>

Effectivement il faut un lien direct vers la vidéo.

Celui ci est direct ( il est dans le code donné précédemment )  
Code:
http://www.k-upload.fr/download.php?typefile=video&url=vide_2018-02-17-1da006f4dtestanimatio.mp4
mais il est récupéré en "trichant un peu"...

il serait préférable d'héberger votre vidéo par exemple chez archive host ( il me semble qu'il y a un compte gratuit avec espace limité mais suffisant ) .

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par Neptunia Mer 21 Fév 2018 - 19:04

Coucou ^^


Un lien direct ne comporte jamais de ? dans son adresse
Le lien direct de cette vidéo :

Code:
http://video.k-upload.com/view-video-vide_2018-02-17-1da006f4dtestanimatio.mp4
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par 4ki Mer 21 Fév 2018 - 20:41

Bonsoir Adam, bonsoir Neptunia Smile

Donc voici mon code après modification, mais rien ne fonctionne... Sad

Code:
<body>
  <!-- Start Video -->
<video autoplay loop id="video-background" muted plays-inline>
  <source src="    http://video.k-upload.com/view-video-vide_2018-02-17-1da006f4dtestanimatio.mp4" type="video/mp4">
</video>
     <!-- End Video -->
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
 <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" class="module borderwrap" style="z-index: 10000 !important;">
 <div id="login_popup_content">
 <div id="login_popup_background">
 <div id="login_popup_title" class="maintitle"><h3>{SITENAME}</h3></div>
 <div class="box-content">
 {LOGIN_POPUP_MSG}
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get" target="_parent">
 <input type="submit" class="button" value="{L_LOGIN}" />
 <input type="button" class="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 </div>
 </div>
</div>
<!-- END switch_login_popup -->

<div class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">

 <div id="ipbwrapper">

 <a id="top" name="top" accesskey="t"></a>

 <div id="logostrip" class="clearfix">
 <a href="{U_PORTAL}" id="logo" title="{L_INDEX}"><img src="{LOGO}" alt="{L_INDEX}" /></a>
 <!-- BEGIN switch_h1 -->
 <div id="main-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p id="site-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>

 <div id="submenu">
 <ul>
 <li class="clearfix">{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 <!-- BEGIN switch_user_logged_in -->
 <div id="userlinks" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li class="last"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 </ul>
 <p>{LOGGED_AS}.</p>
 </div>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_out -->
 <div id="userlinks" class="not-connected clearfix">
 <span class="guest">{L_NOT_CONNECTED}</span> <span>{L_LOGIN_REGISTER}</span>
 </div>
 <!-- END switch_user_logged_out -->

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <div class="module borderwrap">
 <div class="box-content">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <div class="module borderwrap">
 <div class="box-content">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="container">
 <div id="content">

 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="main">
 <div id="main-content">

J'ai aussi inséré le code css, mais rien n'y fait... Je ne vois pas la vidéo en background. Est ce un souci de lien d'hébergement ou est ce un problème dans mon code confused

Ma prochaine étape sera d'essayer un autre hébergement... Car sur "Archive host", j'ai un essai de 14 jours seulement donc ce n'est pas intéressant... Ou peut être essayer de l'héberger sur mon compte youtube... Mais est ce possible de paramétré un code pour effectuer le même travail si la vidéo n'est pas en .mp4 ?

Pour information je ne suis pas pressé, j’apprends en même temps Smile Merci pour votre temps. amicalement
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par Neptunia Mer 21 Fév 2018 - 21:34

La video ne fonctionne pas parce que vous avez ajouté des espaces avant le lien de la video !

Pour ce qui est d'Archive-Host, vous avez une offre gratuite de 500 mo
-> https://www.archive-host.com/page-inscriptionf > Vos besoins sont simples ?

Pour Youtube, même pas la peine d'y songer, pas de lien direct. Et en plus ils ont la suppression facile et sans la moindre justification.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond animée .mp4 [invision]

Message par 4ki Mer 21 Fév 2018 - 22:36

Oups je suis confus Neptunia, effectivement vous avez raison ^^

Par contre le lien vidéo ne fonctionnant toujours pas, j'ai effectué une inscription gratuite (que je n'avais pas vu auparavant scratch  ) sur Archive Host et la, le lien fonctionne !!

Mais j'ai d'autre soucis, la page se charge encore trop lentement, on dirai que mes images hébergées sur "servimg" mettent du temps à charger... Est ce vraiment encore un problème d'hébergement ou autre chose qui fait que mes images sont longues à venir...

cela sent la création d'un autre post il me semble  Interrog

Je vais mettre résolu pour ce problème, que vous avez réussi à éclairer Smile

et créer un autre post dans la section appropriée... Merci pour tout merci pour votre temps Wink
4ki

4ki
Nouveau membre

Messages : 21
Inscrit(e) le : 16/02/2018

https://www.lc4-team.com
4ki a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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