Bordure sur un Iframe.

Résolu
Bonjour,
J'ai mis un texte en float droit d'un Iframe.
J'ai donc une vidéo à droite de mon texte.
Mais je voudrais qu'il y ait une bordure autour de cette vidéo.
Je ne sais pas comment faire.

Merci pour votre aide.

1 réponse

  1. Salut,

    Tu peux utiliser la propriété css border : https://developer.mozilla.org/fr/docs/Web/CSS/border

    Bonne journée,
    0
    1. Bonour Pitet, merci pour ta réponse, j'ai déjà essayé.
      J'ai fait "div class="floatdroit"><Iframe.......>
      mais ça ne fonctionne pas: pas de bordure.
      0
    2. Où est le code css ?
      Peux tu nous montrer un extrait complet ?
      0
    3. @PitetBonjour Pitet, merci pour ton aide.
      Voici le Html:
      <iframe width="640" height="360" style="float:right" src="https://www.youtube.com/embed/An2OWZH2guE" frameborder=1 marginwidth = 15px marginheight=15px allowfullscreen></iframe>texte ............

      Et voici le Css:
      body{ 
      margin-left: 7%;
      margin-right: 7%;
      font-family: tahoma, arial, helvetica, sans-serif;
      font-size: 150%;
      line-height: 150%;
      text-align: justify;
      background-color: #f2f2f2; }

      .imagetitre{
      margin:0;
      padding:0;
      background-image: no-repeat center fixed;
      }

      .textetitre{
      position:absolute;
      top: 30%; left: 1%; right: 1%;
      text-align: center;
      color: white;
      font-size: 240%
      }

      .iconeretour{
      position: fixed;
      font-size: 2em;
      right: 0;
      bottom: 2%;
      }

      .titresommaire{
      font-size: 170%;
      text-align: left;
      text-decoration: underline;
      font-weight: bold;
      color: blue;
      line-height: 200%;
      }

      .sommaire{
      font-size: 140%;
      text-align: left;
      line-height: 140%;
      font-weight: bold;
      text-decoration: none;
      }

      .titrechapitre{
      font-size: 170%;
      color: blue;
      font-weight: bold;
      text-decoration: underline;}

      .lien:link{color: blue;}
      .lien:visited{color: black;}
      .lien:active{color: green;}
      .lien:–{color: yellow;}

      .floatright a{
      float: right;
      border: 15px solid #F2F2F2;}

      .floatleft a{
      float: left;
      border: 15px solid #F2F2F2;}

      .imagegauche{/*pour les <img class="imagegauche"*/
      float: left;
      border: 15px solid #F2F2F2;}

      .imagedroit{
      float: right;
      border: 15px solid #F2F2F2;}

      .floatrightpasdebordure a{
      float: right;
      border: none;}

      .rouge{
      color: red}

      .gras{
      font-weight: bold;}

      .intro{
      font-size: 170%;
      text-align: left;
      color: black;
      line-height: 160%;
      font-weight: bold;}

      .bombeinsertion{
      background-color: #e0e0e0;
      line-height:1,2em;
      border:1px solid #000000;
      border-radius: 20px 20px 20px 20px;
      padding: 5px 5px 5px 5px;
      margin: 50px 10px 50px 500px;
      color: black;
      display : block ;}

      .encartmagma {
      background-color: #e0e0e0;
      text-align: justify;
      line-height:1,2em;
      border:1px solid #35a04d;
      border-radius: 20px 20px 20px 20px;
      padding: 20px 20px 20px 20px;
      margin: 0px 310px 0px 0px;}

      .pasdebordure{border:none;}

      .encartcirage {
      background-color: #e0e0e0;
      text-align: justify;
      line-height:1,2em;
      border:1px solid #35a04d;
      border-radius: 20px 20px 20px 20px;
      padding: 20px 20px 20px 20px;
      margin: 0px 30px 0px 30px;
      color: black;
      display : block ;
      }

      .galerielargeur {
      max-width: 20%;
      }

      .galerie {
      display: inline-block;
      width: 20%;
      vertical-align: middle;
      text-align: center;
      }
      img {
      max-width: 100%;
      }

      /* ----------------------info bulle------------------*/

      a.info {
      position: relative;
      color: black;
      text-decoration: none;
      border-bottom: 1px gray dotted; /* On souligne le texte. */
      }
      a.info span {
      display: none; /* On masque l'infobulle. */
      }
      a.info:hover {
      background: none; /* Correction d'un bug d'Internet Explorer. */
      z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

      cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
      }
      a.info:hover span {
      display: inline; /* On affiche l'infobulle. */
      position: absolute;

      white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

      top: 25px; /* On positionne notre infobulle. */
      left: -160px;

      background: white;

      color: black;
      font-size: 30px;
      padding: 3px;

      border: 1px solid grey;
      border-left: 2px solid grey;
      }

      #header {
      text-align: center;
      padding: -1;
      margin: -1;
      }
      /*--------------------fin info bulle -----------------------------*/
      Merci pour ton aide et tes explications.
      0
    4. Tu peux définir une classe pour la balise iframe dans le code html, puis ajouter le style de cette classe dans le fichier css :
      <!-- HTML -->
      <iframe width="640" height="360" class="mon-iframe" src="https://www.youtube.com/embed/An2OWZH2guE" allowfullscreen></iframe>
      


      /* CSS */
      .mon-iframe {
        float: right;
        border: solid 2px red;
      }
      
      0
    5. Ok Pitet, ça marche nickel, merci.
      A plus
      0