Déplacement d'une vidéo youtube dans un site
Fermé
discworld
-
30 mai 2014 à 13:20
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 5 juin 2014 à 14:38
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 5 juin 2014 à 14:38
A voir également:
- Déplacement d'une vidéo youtube dans un site
- Comment télécharger une vidéo youtube - Guide
- Script vidéo youtube - Guide
- Site de telechargement - Guide
- Bloqueur de pub youtube - Guide
- Amazon prime video - Guide
5 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 30/05/2014 à 13:44
Modifié par animostab le 30/05/2014 à 13:44
Bonjour
tu place ta vidéo dans un div
exemple
ensuite pour positionner et dimensionner cette div il faut utiliser css (appelé aussi style)
exemple dans la balise <head> tu mets
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.
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ù?
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.
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.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
30 mai 2014 à 22:57
30 mai 2014 à 22:57
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++
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 .....
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 .....
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
4 juin 2014 à 14:50
4 juin 2014 à 14:50
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
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 :-)
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?
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?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
5 juin 2014 à 14:38
5 juin 2014 à 14:38
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 !
