Insérer une video d'accueil dans Wordpress

Fermé
CoralieNecusto Messages postés 11 Date d'inscription vendredi 1 juillet 2016 Statut Membre Dernière intervention 16 août 2016 - 1 juil. 2016 à 05:37
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 5 juil. 2016 à 07:00
Bonjour,

Je viens à vous car je suis en manque d'informations. Je suis web designer et j'ai besoin que quelqu'un qui maitrise bien la programmation web puisse m'aider. Avec à l'avance mes remerciements.

J'ai envie de faire dans mon site wordpress une page d'accueil intégrant une video, mais pas n'importe quelle intégration. J'aimerais le faire dans le style du site airbnb. Voici le lien :

https://www.airbnb.fr/

comment puis-je intégrer de la même façon ma video sur mon site wordpress? sur quel hébergeur placer ma vidéo?

j'ai trouvé le code de leur page :

<!--[if (gt IE 8)|!(IE)]><!-->
<div id="hero-video-player"
class="fullscreen-video-player fullscreen-video-player--hidden"
aria-hidden="true">
<div class="row row-table row-full-height">
<div class="col-sm-12 col-middle text-center">
<div data-hook="homepage-video"
data-preload="none"
data-mp4="https://a0.muscache.com/airbnb/static/FR_60_ANTHEM.mp4"
data-webm="https://a0.muscache.com/airbnb/static/FR_60_ANTHEM.webm"
data-video-id=3>
</div>
<i id="play-button-hero"
class="fullscreen-video-player__icon icon icon-video-play icon-white hide"></i>
<a id="close-fullscreen-hero" class="fullscreen-video-player__close link-reset" href="#">
<i class="icon icon-remove"></i>
<span class="screen-reader-only">
Quitter le plein écran
</span>
</a>
</div>
</div>
</div>
<!--<![endif]-->



mais je souhaiterais davantage d'informations.

Avec mes remerciements
A voir également:

1 réponse

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
Modifié par elgazar le 1/07/2016 à 09:29
Bonjour

il faut que tu crée un modèle de page que tu pourras personnalisé comme tu veux

le plus simple est d'ouvrir un (bon) éditeur de texte genre notepad++ et de coller ces quelques lignes
<?php
/*
Template Name: page-accueil
  • /?>

ce bout de code va définir le nom de ton modèle ensuite tu ouvres le fichier page.php de ton thème et tu copie son code pour le coller sur ta nouvelle page en ne prenant que ce qui est nécessaire à ta page par exemple avec un code de page reprenant le header, le footer et le corps du thème twentyfifteen
<?php
/*
Template Name: page-accueil
*/
?>
<?php
/**
 * The template for displaying pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

 <div id="primary" class="content-area">
ici le contenu qui ira dans le corps de la page
 </div><!-- .content-area -->

<?php get_footer(); ?>


et tu enregistre cette page sous le nom de modele-accueil.php.

ensuite va dans l'administration de ton site et crée une page "accueil", va ensuite dans réglage=>lecture et choisis la page statique accueil comme page d'accueil.

Il ne te reste plus qu'a aller dans le menu pages=>toutes les pages=>modifier page d'accueil et dans le menu de droite a dérouler la case modèle pour choisir page-accueil.

tu n'a plus qu'a aller voir si ta page d'accueil fonctionne correctement
Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
0
CoralieNecusto Messages postés 11 Date d'inscription vendredi 1 juillet 2016 Statut Membre Dernière intervention 16 août 2016
4 juil. 2016 à 03:12
Merci pour votre réponse mais on m'a dit qu'il faut du javascript aussi, avec votre solution c'est avec ou sans javascript ? il faut un plugin particulier? genre sliders?
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322 > CoralieNecusto Messages postés 11 Date d'inscription vendredi 1 juillet 2016 Statut Membre Dernière intervention 16 août 2016
Modifié par elgazar le 4/07/2016 à 10:54
en fait, je me suis trompé, je n'avais pas vu que tu voulais le mettre en background de ton header.

Pour insérer un background video dans ton header, le plus simple est d'utiliser un plugin video background et une page d'accueil statique pour ne l'avoir que sur la page d'accueil du site

télécharge le plugin et installe-le
ouvre une nouvelle page statique et en bas de la page tu trouveras une section "vidéo background"
la première case "container" sert a indiquer dans quel div mettre la vidéo donc suivant ton thème cela peut etre header ou site-header (regarde dans ton code source)
pour le reste des cases, tu as juste a insérer l'url des videos et a cocher diverses options (limitées dans la version gratuite)

une fois que c'est fait, regarde si la vidéo fonctionne correctement en allant sur la page car suivant ton thème , les dimensions du header devront être modifiées dans le fichier style.css (il vaut mieux créer un thème enfant si c'est le cas)

il ne te restera plus qu'a mettre cette page en page d'accueil via le menu réglages=>lecture=>la page d'accueil affiche=>le nom de ta page statique

et voila !
0
CoralieNecusto Messages postés 11 Date d'inscription vendredi 1 juillet 2016 Statut Membre Dernière intervention 16 août 2016
5 juil. 2016 à 05:17
Merci Beaucoup pour l'aide !

Et du coup je dois créer obligatoirement une nouvelle page statique? C'est possible de reprendre ma page actuelle Home?

Autre chose, pour l'hébergement de la video, je peux l'héberger n'importe où ou il faut là encore un endroit précis?
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322 > CoralieNecusto Messages postés 11 Date d'inscription vendredi 1 juillet 2016 Statut Membre Dernière intervention 16 août 2016
5 juil. 2016 à 07:00
si tu utilise déjà une page statique comme accueil, tu n'a évidemment pas besoin d'en créer une autre, il suffit d'insérer la vidéo comme expliqué

pour la vidéo, tu peux soit l'uploader sur ton site pour la mettre dans ta bibliothèque média soit mettre directement l'url du fichier dans la version gratuite du plugin donc les gébergeurs de fichiers devraient fonctionner mais le mieux c'est de tester.

la version premium propose, outre plus de contrôles sur ta vidéo, la possibilité d'utiliser des vidéos youtube ce qui peut être intéressant pour les amateurs
0