Superposer une image sur un player

Bonjour,

Je cherche désespérément à superposer une image de type logo en .png sur un lecteur vimeo. Cela ne me paraissait pas si compliqué mais pourtant je ne trouve pas de solution.

Lorsqu'on arrive sur la page d'accueil du site sur lequel je travaille, il y a une vidéo en fullscreen qui tourne en boucle. J'aimerai simplement appeler une image avec un fond transparent pour qu'un logo se superpose à la vidéo.

Est-ce quelqu'un sur le forum a déjà fait ça auparavant et pourrait m'aider ?

il faut gérer la position absolue de ton image, pour la placer où tu le désire, puis utiliser les z-index pour que ton image soit "au dessus" de ta vidéo.

C'est pourtant ce que j'essaye de faire mais l'image se positionne en dessous de la vidéo, elle ne se superpose pas. J'ai utilisé des balises <iframe> pour la vidéo, est-ce que le problème pourrait venir de la ?

Voilà mon morceau de code :

    <header id="accueil" class="container">
        <iframe src="http://player.vimeo.com/video/114808107?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1&amp;loop=1" width="500" height="281" frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen z-index="1">
        </iframe>
        <img src="img/logo_noir.png" alt="logo" width="200" heigth="100" position="absolute" z-index="2">
    </header>    
 

là je vois pas de margin-quelquechoses ou padding-quelquechoses..

il faut jouer avec pour gérer le positionnement absolute.
Modifié par JENCAL (06 May 2015 - 15:13)

Salut ana_,
Tu as un souci avec ton code, les déclarations de style ne sont pas correctes. Les attributs "position" et "z-index" n'existent pas dans une balise html , sans compter la faute d'orthographe sur "height"...

<img src="img/logo_noir.png" alt="logo" width="200" heigth="100" position="absolute" z-index="2">
 

Si tu veux mettre du CSS en ligne (directement dans une balise) tu dois l'écrire comme ça :

<img src="img/logo_noir.png" alt="logo" width="200" height="100" style="position: absolute; z-index: 2; width: 200px; height: 100px;">
 

Corrige ça et ton positionnement sera peut-être meilleur...
Modifié par MatthieuR (07 May 2015 - 00:24)

Merci Matthieu,

J'ai corrigé la syntaxe de mon code mais rien ne change, mon image se met automatiquement à la ligne de la vidéo.

Je pense qu'il y a surement des choses qui rentrent en conflit les unes avec les autres.

Pourtant ce que je veux faire ne me paraît pas si compliqué ! Mais je ne trouve aucune solutions en ligne.

Quelle méthode utiliserais-tu pour superposer un logo sur un player vidéo ? Peut-être que les balises <iframe> ne sont pas la bonne solution ?

Salut ana_,

Tu peux aller voir ce que j'ai testé : http://alsacreations.matthieurebillard.fr/004/.

Je te laisse regarder comment j'ai fait mais le plus important est de mettre le logo en absolute avec des notions de left et top (ou right ou bottom) et que le bloc parent (.container) doit être en relative car un élément absolute va se référer au plus proche parent relative.

Si tu veux centrer ton image dans le .container, je ferais differement en positionnant le iframe en absolute et une image étant un élément inline je mets un text-align:center sur le parent. Pour le centrage vertical, je te laisse trouver... un peu d'aide ici

pour le centrage de l'image, elle peut rester en absolute, avec les 4 coordonnées à zero et un margin:auto;

il faut penser a mettre le parent en relative et a faire en sorte qu'il se retracte sur l'iframe en modifiant son display:
exemple basique http://codepen.io/anon/pen/EjPYbz

<header id="accueil" class="container">
  <iframe src="http://player.vimeo.com/video/114808107?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1&amp;loop=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen z-index="1">
  </iframe>
  <img src="https://wiki.videolan.org/images/Ubuntu-logo.png" alt="logo" width="200" heigth="100" />
</header>

header {
  position: relative;
  display: inline-block;/* ou float ou inline-table ou table ou absolute : "contexte de formatage" */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Modifié par gc-nomade (07 May 2015 - 23:40)

Merci à tous.
Malheureusement aucune de vos propositions n'a été la solution à mon problème.
Je vais construire ma page autrement ou intégrer le logo directement dans la vidéo je pense.