Déplacement d'une vidéo youtube dans un site
discworld
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je souhaite integrer des vidéos youtube dans mon site internet et j'ai trouver comment faire :-) .
Le probleme est que cette vidéo est par défault (si je rentre juste mon code d'intégration)
insérée dans le coin gauche en haut ....
Comment déplacer cette vidéo sur ma page web?
Je souhaitre la mettre a un endroit précis..pas juste centré en haut.
j'ai cherché et n'ai rien trouvé!
(je ne connais pratiquement rien en codage html mais suis prete a apprendre :-) j'utilise webcreator et il y a une fonction html )
Merci de m'avoir lu.
Je souhaite integrer des vidéos youtube dans mon site internet et j'ai trouver comment faire :-) .
Le probleme est que cette vidéo est par défault (si je rentre juste mon code d'intégration)
insérée dans le coin gauche en haut ....
Comment déplacer cette vidéo sur ma page web?
Je souhaitre la mettre a un endroit précis..pas juste centré en haut.
j'ai cherché et n'ai rien trouvé!
(je ne connais pratiquement rien en codage html mais suis prete a apprendre :-) j'utilise webcreator et il y a une fonction html )
Merci de m'avoir lu.
5 réponses
-
Bonjour
tu place ta vidéo dans un div
exemple
<div class="video">code d'intégration de la vidéo</div>
ensuite pour positionner et dimensionner cette div il faut utiliser css (appelé aussi style)
exemple dans la balise <head> tu mets
<style>
.video {
width:400px;
height:300px;
margin: 200px auto 50px auto;
}
</style>
width largeur en pixel (px)
height hauteur
margin : la marge externe (haut droite bas gauche) auto veux dire centré.
normalement css se mets dans un fichier externe mais peux etre aussi intégré a ta page avec la balise style
voila tu peux en apprendre plus
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
http://css.mammouthland.net/
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus. -
Merci beaucoup pour votre réponse.
Ca avance ....
Voila ce que j'avais avant : http://www.chatteriedessixjoyaux.fr/test_site2.html
la vidéo est mal placé mais elle se lance en cliquant sur lecture.
voila maintenant : http://www.chatteriedessixjoyaux.fr/test_site.html
la vidéo est déplacée mais impossible de la lire......
le code pour la 1ere page :
<iframe width="640" height="480" src="//www.youtube.com/embed/zNduH4Y8D44?rel=0" frameborder="0" allowfullscreen></iframe>
<style>
.video {
width:100px;
height:500px;
}
</style>
le code pour la 2eme page :
<div class="video"><iframe width="640" height="480" src="//www.youtube.com/embed/zNduH4Y8D44?rel=0" frameborder="0" allowfullscreen></iframe></iframe></div>
<style>
.video {
width:400px;
height:300px;
margin: 200px auto 50px auto;
}
</style>
De plus j'ai essayé de changer les paramètres de position (margin: 500px auto 100px auto) mais cela n'a rien changé sur l'emplacement de la vidéo.....
je pense que je commets une erreur mais où? -
Bonjour,
Alors 1er point ta vidéo à des dimensions bien précise :
<iframe width="640" height="480" src="//www.youtube.com/embed/zNduH4Y8D44?rel=0" frameborder="0" allowfullscreen></iframe></iframe>
width:640px et height:480px
Tu mets cette vidéo dans une div qui à des dimensions plus petite width:400px; et height:300px;
Donc soit tu changes les valeurs de l'iframe soit du change celle de ta class vidéo.
Si tu veux positionner très précisément ta div tu peu utiliser ceci:
body ou la div qui englobe ton bloc vidéo{position:relative;}
puis
.video{position:absolute;top:200px;left:500px;}
Tu ajustes la position en diminuant ou en augmentant les valeurs.-
il faut plutot changer les dimensions de .video
width:640px;
height:480px ;
normalement <style> ......</style> se mets plutot juste avant la ou tu verra </head>
tu as mis 2 fois la balise de fermeture de l'iframe
</iframe></iframe></div> ----> retire en une
un conseil important: mets tous les styles dans un fichier css que tu appel dans la page au lieu d'avoir ce genre de code
<DIV id=lmwcbackpanel style="visibility:visible;position:absolute;left:0;top:0;width:1200;height:1000;clip:rect(0,1200,1000,0);">
cela permet d'avoir ses styles dans un seul fichier qui est global a tout le site
et chaque page du site appelle ce fichier
voir
http://css.mammouthland.net/principe-des-css.php
et
http://css.mammouthland.net/feuille-de-style-css-debutant.php
mieux vaut appliquer tout de suite les bonnes méthodes quitte a prendre plus de temps que de se rendre compte qu'il faut tout recommencer (et mettre plus de temps en fait)
je ne sais pas si webcreator peut creer un page css sinon il existe des editeur de code (css et autres languages) gratuits comme notepad++
-
-
Merci pour votre aide
j'ai modifié les dimensions dans la div
et supprimé le iframe en trop ....
j'arrive a déplacer ma vidéo de haut en bas mais pas de gauche a droite et elle ne se lance toujours pas.
voici le lien de la page : http://montmirail-dhier-a-aujourdhui.fr/index.html
et le code :
<div class="video"><iframe width="640" height="480" src="//www.youtube.com/embed/zNduH4Y8D44?rel=0" frameborder="0" allowfullscreen></iframe></div>
<style>
.video {
width:640px;
height:480px;
margin: 800px auto 400px auto;
}
</style>
A Bob:
"Si tu veux positionner très précisément ta div tu peu utiliser ceci:
body ou la div qui englobe ton bloc vidéo{position:relative;}
puis
.video{position:absolute;top:200px;left:500px;} "
ou dois je mettre ce code?je ne comprend pas
A animostab:
Pas de page css avec webcreator que du html .....-
tu mets le code dans la balise <style> mais comme je l'ai dit il vaut mieux mettre les style dans un fichier css
tu peux editer du css dans n'importe quel éditeur comme le blocnote windows ou mieux notepad++ (qui est gratuit)
tu enregistres avec une extension .css (exemple monstyle.css)
tu mets le fichier monstyle.css à la racine de ton site (dans le meme dossier que ta page html)
ensuite tu appel ce fichier dans tes pages html entre les balises <head> comme ceci
<link href="monstyle.css" rel="stylesheet" media="all" type="text/css">
comme cela tes styles seront commun a toutes les pages de ton site
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
les vidéos ne seront pas au même endroit dans toutes les pages ,il y aura même quelques fois plusieurs vidéos sur la même page....
alors je préfère faire avec le html
une fois que j'aurais le bon code je n'aurais plus qu'a modifié le lien de la vidéo et son emplacement :-)-
Edit: c'est bon pour le placement de la vidéo mais on ne peut pas la lire !
le code : <div class="video"><iframe width="640" height="480" src="//www.youtube.com/embed/aGJ1FtW_rmg?rel=0" frameborder="0" allowfullscreen></iframe></div>
<style>
.video {
width:650px;
height:490px;
position:absolute;top:800px;left:500px;
}
</style>
le lien : http://montmirail-dhier-a-aujourdhui.fr/index.html
je ne comprend pas pourquoi elle se lance si je lui laisse sa position par défaut mais pas quand je la déplace .....
Avez vus une idée? -
sur un ecran large la video passe sous le cadre a gauche ca c'est a cause du positionnement absolute. qui sort la div video du flux de code, tu devrais vraiment apprendre html et css parce que en faisant comme tu fais tu va droit dans le mur et tu sera vite confronter a des problèmes ingérables !
-
