1485 sujets

Web Mobile et responsive web design

Bonsoir,
j'ai intégré une vidéo sur le site http://effetvape.ca avec le code si dessous:

<object type="application/x-shockwave-flash" width="100%" height="600" data="http://www.vimeo.com/moogaloop.swf?clip_id=102863617&amp;server=www.vimeo.com&amp;fullscreen=1&amp;autoplay=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;loop=1&amp;autopause=1"> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=102863617&amp;server=www.vimeo.com&amp;fullscreen=1&amp;autoplay=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;loop=1&amp;autopause=1" /></object>

le problème est que la vidéo n'est pas lisible sur les mobiles. Pourriez vous m'éclairer afin que le code puisse fonctionner
Merci à vous
Hello,

Ta vidéo utiliser flash comme lecteur, c'est donc normal qu'elle ne soit pas lue sur les mobiles. Il te faudrait un lecteur vidéo au format HTML5.
Merci pour ta réponse rapide
Comme je suis une sacré novice pourrais tu m'expliquer comment faire?
Ma vidéo est hébergée sur viméo et il faudrait qu'elle soit accessible sur tout les navigateurs, ainsi que les mobiles.

Merci d'avance
Bonjour,

Sur la page de ta vidéo sur Viméo, clique sur l'icône de partage à droite dans le cadre de la vidéo, puis sur "intégrer". Tu obtiendras un code intégrable fonctionnel sur les appareils mobiles. Il faudra simplement modifier ses attributs pour pouvoir le passer en plein écran.
Ok merci audrasjb pour tes explications
j'ai teste en faisant ça
<iframe src="//player.vimeo.com/video/102863617?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;loop=1" width="100%" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen value="true"></iframe>

mais cela ne fonctionne pas je pense que le parametre n'est pas reconnu
En fait lorsque j'utilise le code avec flash on ne peut pas lire la video sur mobile et lorsque j'utilise <iframe src="//player.vimeo.com/video/102863617?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;loop=1" width="100%" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen value="true"></iframe>

le code fonctionne sur les mobiles mais la fonction allowfullscreen n'est pas active donc le plein ecran ne fonctionne plus sur chrome par exemple
en fait lorsque j'enleve width et height comme dans ton exemple et que je l'ajoute au css
la video apparait en miniature
En fait les vidéos responsive c'est un peu la galère. width="100%" n'est pas valide, normal que ça ne marche pas. J'ai un doute sur le fait que tu puisses utiliser vimeo pour une vidéo full screen.

Pour que la vidéos se redimensionne en gardant les proportions en fonction du navigateur :
- version longue explication dans l'article : http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
- version courte plugin jQuery http://fitvidsjs.com/
- tu peux passer par http://embedresponsively.com/ aussi
Mais ces 3 solutions te régleront pas de souci de fullscreen par contre je pense Smiley ohwell
J'ai vu qu'il existait un script webkitEnterFullScreen.
Pensez vous qu'il pourrait resoudre mon probleme?