18043 sujets

Questions générales et questions de débutants

Problème avec les videos Youtube

Bonjour, je viens de me remettre au Html et Css et j'ai un petit problème avec les vidéo venant de You tube ou de Vimeo. Quand je met le code Iframe dans le Html, la vidéo ne s'affiche pas. J'ai d'abord pensé que c’était un problème de marge ou de taille que j'avais écrite. Mais j'ai essayer d'importer une vidéo Daylimotion et comme par magie celle-ci s'affiche correctement. Je suis un peu perdu.
voici mon code Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlashBmx</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>
</head>

<body id="corps">
<div id="tete">
  <h1><span>Flash Bmx</span></h1>
	<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Accueil</span></a></li>
   <li><a href='#'><span>Photos</span></a></li>
   <li><a href='#'><span>Video</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div>
  <article id="art1">
        <h2 class="arttitre">Markit Denim Winter Promo </h2>
        <p id="date">Publié le<b> 18 Décembre</b> par<b> Thevaleentiin</b></p>
        <hr />
        <div class="texte">
          <p>
          Riders: Christian Rigal, Dennis Enarson, Rob Wise, Connor Lodes, Chad Kerley, Geoff Slattery, Mike Jonas and Ronnie Napolitan
       </p> 
      <iframe width="560" height="315" src="//www.youtube.com/embed/DfVzG9wSHY8" frameborder="0" allowfullscreen></iframe>
       </div>

        </article>
  <article id="art1">
        <h2 class="arttitre">Welcome</h2>
        <p id="date">Publié le<b> 17 Décembre</b> par<b> Thevaleentiin</b></p>
        <hr />
        <div class="texte">
          <p>.</p>
        </div>
        </article>
        
      </div>
<footer>
</footer>
</body>
</html>


Et mon code Css:

@import url(http://fonts.googleapis.com/css?family=Capriola);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Capriola', sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  zoom: 1;
  height: 69px;
  background: url(bottom-bg.png) repeat-x center bottom;
  border-radius: 2px;
  width: auto;
}
#cssmenu ul {
  background: url(nav-bg.png) repeat-x 0px 4px;
  height: 69px;
}
#cssmenu ul li {
  float: left;
  list-style: none;
}
#cssmenu ul li a {
  display: block;
  height: 37px;
  padding: 22px 30px 0;
  margin: 4px 2px 0;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  font-weight: 400;
  opacity: .9;
}
#cssmenu ul li:first-child a {
  margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: url(color.png) center bottom;
  display: block;
  height: 37px;
  margin-top: 0px;
  padding-top: 26px;
  color: #1a95a0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
  opacity: 1;
}
/*Fin de personnalisation du menu */
#tete
{
    background: #e7e5e4; 
    margin: -10px;
    background-position: 0px 0px;
    border-style: groove;
}
#corps
{
background-image: url("fond2.jpg");
background-attachment: fixed;
}
h1 {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 0;
    color: #1e1e1e;
    background-color: #e7e5e4;
    font-family: 'Gabriela', serif;
    font-size: 80px;
    letter-spacing: .10em;
    text-align: center;
    text-shadow:
        1px -1px 0 #767676,
        -1px 2px 1px #767474,
        -2px 4px 1px #7b7a7a,
        -3px 6px 1px #828181,
        -4px 8px 1px #8b8a89,
        -5px 10px 1px #949392,
        -6px 12px 1px #9e9c9c,
        -7px 14px 1px #a8a6a6,
        -8px 16px 1px #b2b1b0,
        -9px 18px 1px #bcbbba,
        -10px 20px 1px #c6c4c4,
        -11px 22px 1px #cfcdcd,
        -12px 24px 1px #d8d6d5,
        -13px 26px 1px #dfdddc,
        -14px 28px 1px #e4e3e2;
}
.texte
{
    text-align: left;
    font-family: 'Gabriela', serif;
    width: 800px;
    margin: 20px;
 
}
#art1
{
    width: 900px;
    margin: 200px;
    margin-left: 50px;
    margin-top: 50px;
    padding: 10px;
    max-height: 400px;
}
hr
{
   width: 100%;
   color: darkgrey;
   height: 3px;
}
.arttitre
{
    font-family: 'Gabriela', serif;
    margin-left: 20px;
}
#date 
{
    margin-left: 50px;
}


Merci D'avance ! Smiley biggrin
Erreur, désolée, je n'avais pas trouvé comment annulé ma réponse Smiley confused
Modifié par Christele (20 Dec 2013 - 09:48)
@Christele, sérieux ? Smiley lol kamoulox ?

Bonjour @Thevaleentin,
essaye en remplaçant ton lien youtube :
//www.youtube.com/embed/DfVzG9wSHY8

par
http://www.youtube.com/embed/DfVzG9wSHY8

Pense à vider le cache de ton navigateur également (on sait jamais).
Pour ma part ça fonctionne chez moi lorsque je reprend ton code.
Sujet clos
Aller à