mettre une bordure autour d'une video

13 octobre 2017 à 8:23:22

Bonjour voila je suis débutant en css et html et j'aimerais pouvoir mettre une bordure autour d'une vidéo YouTube ou une image derrière

voici le code pour la vidéo:

pouvez me dire en détaille comment faire merci et bonne journée

Niko300

13 octobre 2017 à 8:37:39

Comme n'importe quelle mise en page, tu la met dans un div de la largeur de l'iframe et t'applique une bordure en CSS via l'identifiant du div...

<html>
<head>

<style>

#video1
{
	border:5px solid red;
	width: 560px;
}

</style>
</head>

<body>
<div id="video1" >
<iframe class=video width="560" height="315" src="https://www.youtube.com/embed/u781iSw73eY" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

World of Potion | Discord 3D [FR] | Direct Quiz

xstarmen

28 octobre 2017 à 16:02:08

Bonjour, est-ce possible de mettre une image ( cadre en bois) autour d'une vidéo youtube ou autre lecteur ? Moi a chaque fois, l'image se trouve soit à coté ou en dessous / dessus . Merci beaucoup pour les réponses

Niko300

29 octobre 2017 à 16:42:08

Tu fais une image de cadre sur photoshop ou autre logiciel de 2D d'une dimension de la vidéo + 2 fois l'épaisseur du cadre voulu en hauteur et en largeur.

Ensuite tu dessine ton cadre en bois ou t'en prends un sur Google et tu le dimensionne de façon à ce que t'ai la bonne dimension de cadre sur chaque côté de ton image.

Ensuite il faut mettre l'image en background-image du div et sans répétition avec un espacement (padding) de la taille des bords du cadre.

Voici le code inspiré du précédent code que j'ai posté :

<html>
<head>
 
<style>
 
#video1
{
    width: 560px;
	padding: 20px;
	background-image: url('cadre.jpg');
	background-repeat: none;
}
 
</style>
</head>
 
<body>
<div id="video1" >
<iframe class=video width="560" height="315" src="https://www.youtube.com/embed/u781iSw73eY" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

-
Edité par Niko300 29 octobre 2017 à 16:43:26

World of Potion | Discord 3D [FR] | Direct Quiz