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
Page 1 sur 1 • Partagez
Image de fond animée .mp4 [invision]
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...
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
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 :
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
Amicalement
J'aurai besoin de conseils sur plusieurs points...
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
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
Amicalement
- Fichiers joints
Re: Image de fond animée .mp4 [invision]
UP ! (personne pour me donner un coup de pouce ? )
Re: Image de fond animée .mp4 [invision]
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
Mettre le code HTML pour votre vidéo.
Puis ajouter dans votre CSS
Cdt.
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 -->
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.
Re: Image de fond animée .mp4 [invision]
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
Re: Image de fond animée .mp4 [invision]
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> :
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 ce n'est pas évident ^^
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 ce n'est pas évident ^^
Re: Image de fond animée .mp4 [invision]
Bonjour
Oui vous mettez le code HTML après
Effectivement il faut un lien direct vers la vidéo.
Celui ci est direct ( il est dans le code donné précédemment )
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.
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
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.
Re: Image de fond animée .mp4 [invision]
Coucou ^^
Un lien direct ne comporte jamais de ? dans son adresse
Le lien direct de cette vidéo :
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
Re: Image de fond animée .mp4 [invision]
Bonsoir Adam, bonsoir Neptunia
Donc voici mon code après modification, mais rien ne fonctionne...
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
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 Merci pour votre temps. amicalement
Donc voici mon code après modification, mais rien ne fonctionne...
- 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
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 Merci pour votre temps. amicalement
Re: Image de fond animée .mp4 [invision]
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.
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.
Re: Image de fond animée .mp4 [invision]
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 ) 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
Je vais mettre résolu pour ce problème, que vous avez réussi à éclairer
et créer un autre post dans la section appropriée... Merci pour tout merci pour votre temps
Par contre le lien vidéo ne fonctionnant toujours pas, j'ai effectué une inscription gratuite (que je n'avais pas vu auparavant ) 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
Je vais mettre résolu pour ce problème, que vous avez réussi à éclairer
et créer un autre post dans la section appropriée... Merci pour tout merci pour votre temps
Sujets similaires
» logo animée en image de fond ?
» Image de fond (forum) en fonction de la résolution (Invision)
» Invision - Fond annonce défilante
» mettre une image animée
» Image animée coin supérieur gauche
» Image de fond (forum) en fonction de la résolution (Invision)
» Invision - Fond annonce défilante
» mettre une image animée
» Image animée coin supérieur gauche
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
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum