Mettre une vidéo en bannière

  • WordPress :4.8.2
  • Statut : non résolu
15 sujets de 16 à 30 (sur un total de 37)
  • Auteur
    Messages
  • #1926188

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    Bonjour @philyon, la vidéo est sur la page « Réalisations ». Voir url suivante: http://auto-interior66.com/realisations/

    Hier un ami m’a dit que sur son Ipad mini il n’arrivait pas à lire la vidéo. Il avait juste une image avec le logo du bouton play par dessus.

    Très bizarre. Mais sur l’émulateur du navigateur de Google Chrome (Ipad Mode), la vidéo est lu en boucle comme sur desktop.

     

    #1931210

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    Bonjour @philyon, ma vidéo est sur la page « Réalisations » en bannière. 🙂

    Bien à vous,

    Lordaker.

    #1931292

    PhiLyon
    Modérateur
    Maître WordPress
    16152 contributions

    Bonjour.

    Essaies comme ça en mettant le bon nom de page

    <div class="xf__site hfeed">
    <?php 
    	if ( is_page('music')) { 
    		echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/KDXOzr0GoA4" frameborder="0" allowfullscreen></iframe>'; 
    	} 
    ?>
    	<div class="content-area">

    🙂

    #1931383

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    Bonsoir @philyon, voilà ce que j’ai fais en partant de ton code mais j’ai deux fois mon header et ma vidéo ne fait pas toute la largeur de mon écrans.

    <div class="xf__site hfeed">
    	<div class="content-area">
    		<div class="logo">
    			<a href="">
    				<img src="http://auto-interior66.com/wp-content/uploads/2017/09/logo-auto-interior-66-2.png" alt="Logo" />
    			</a>
    		</div>
    		<?php
    		if (is_page('realisations')){
    			echo '
    				<header class="xf__header">
    					<div class="content xf__container">
    						<video class="sample-auto" width="100%" height="420" autoplay loop> 
    							<source src="http://auto-interior66.com/wp-content/uploads/2017/10/boite_de_vitesse_automobile-1.mp4" type="video/mp4">
    						</video>	
        				</div>
    				</header>
    			';
    		}
    Page Header.php

    Bien à toi,

    Lordaker.

    #1931427

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    @philyon, j’ai une idée, je peux mettre la vidéo en position absolute et ainsi elle se mettra par dessus le header.

    #1931436

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    @philyon ça fonctionne bien. maintenant il me reste plus qu’à élargir la vidéo en pleine largeur de mon écran.

    #1931487

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    @philyon Merci, c’est top now. 🙂

    #1931488

    PhiLyon
    Modérateur
    Maître WordPress
    16152 contributions

    Et tu as fait quoi ?

    🙂

    #1931496

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    J’ai le code suivant dans mon fichier header.php

    <div class="xf__site hfeed">
    	<?php
    	if (is_page('realisations')){
    		echo'
    			<div class="banner-video">
    				<video class="sample-auto" autoplay loop preload> 
    					<source src="http://auto-interior66.com/wp-content/uploads/2017/10/boite_de_vitesse_automobile-1.mp4" type="video/mp4">
    				</video>
    			</div>
    		';
    	}
    	?>
    	<div class="content-area">
    		<div class="logo">
    			<a href="">
    				<img src="http://auto-interior66.com/wp-content/uploads/2017/09/logo-auto-interior-66-2.png" alt="Logo" />
    			</a>
    		</div>

    Puis dans mon fichier custom css:

    div.banner-video{
      	position: absolute;
      	width: 100%;
      	height: 420px;
        overflow: hidden;
        z-index: 1;
      	top: 0;
    }
    
    video.sample-auto{
    	max-width: 100%;
        height: 1080px;
        position: relative;
        top: -315px;
    }
    Custom CSS

    Et voilà, maintenant reste plus qu’à tester sur une tablette si ça fonctionne. Sur l’émulateur (Outil de développement) du navigateur de Chrome ça marche (Ipad et Ipad Pro) nickel.

    • Cette réponse a été modifiée le il y a 1 semaine par  Lordaker.
    #1931504

    PhiLyon
    Modérateur
    Maître WordPress
    16152 contributions

    Ayant que des notions de base en PHP pour le moment

    Tu vois, tu progresses.

    🙂

    #1931530

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    🙁 Oh là là, elle s’affiche pas sur la tablette Samsung Galaxy Tab E que j’ai sur la main. J’ai le fond de la bannière mais pas la vidéo. @philyon, tu a aussi la même chose ? Si tu a une tablette à ta disposition ?

    • Cette réponse a été modifiée le il y a 1 semaine par  Lordaker.
    #1931544

    PhiLyon
    Modérateur
    Maître WordPress
    16152 contributions

    Et non, j’ai eu un Ipad mini dans le temps, mais là, plus rien.

    🙂

    #1931560

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    Est-ce que c’est du à la tablette ou au navigateur ? Mais c’est vraiment bizarre. Sur desktop c’est nickel et sur tablette ça marche pas. 🙁

    #1931591

    Lordaker
    Participant
    Initié WordPress
    32 contributions

    @philyon, J’ai installé Firefox le navigateur de Mozilla et la vidéo fonctionne. Alors qu’avec le navigateur de Google ça fonctionne pas. C’est pas un bug dans le navigateur de Google par hasard ?

    • Cette réponse a été modifiée le il y a 1 semaine par  Lordaker.
    #1931634

    PhiLyon
    Modérateur
    Maître WordPress
    16152 contributions

    Regardes du côté des webkits.

    🙂

15 sujets de 16 à 30 (sur un total de 37)
  • Vous devez être connecté pour répondre à ce sujet.