La frontière de la balise ne fonctionne pas dans autour de la balise vidéo HTML5

Je veux mettre une bordure rouge autour de la vidéo, je joue dans mon site web. et voici mon code.

    <div class="yotube_video">
        <video width="700" height="525" controls="controls" scrolling="no" >
            <source src="video/promo_video.mp4" type="video/mp4">
        </video>
    </div>

et les feuilles de Style comprend

div.youtube_video{
border:5px solid red;}

Pourquoi je n'obtiens pas de la frontière autour de la vidéo. S'il vous plaît aider. Aussi, est-il une aide en ligne pour rendre la vidéo plus artistique?

Merci d'avance,
aqzr

  • Si vous êtes satisfait de la réponse, s'il vous plaît voter pour la meilleure réponse et de l'accepter comme une réponse s'il vous plaît. En faisant cela, vous encourager les gens à aider les autres ici sur stackoverflow. @shriguru nayak
InformationsquelleAutor shriguru nayak | 2013-01-01
  1. 5

    Dans le HTML, vous avez écrit:

    <div class="yotube_video">

    Ensuite dans votre CSS, vous avez écrit:

    div.youtube_video

    Le nom de la classe dans le HTML et le CSS devrait être le même. Dans votre fichier HTML que vous avez oublié un "u".
    Il devrait ressembler à ceci:

    HTML

    <div class="youtube_video">
<video width="700" height="525" controls src="video/promo_video.mp4" type="video/mp4">
</video>
</div>

    controls="controls" n'existe pas. Vous avez juste à écrire controls si vous souhaitez activer. scrolling n'existe pas. Ensuite, vous avez besoin de la balise source que si vous fournissez plusieurs source des fichiers encodés dans des formats différents pour les différents navigateurs. Dans votre exemple, il ne devrait pas être nécessaire. Juste à l'aide de src est assez.

    CSS

    div.youtube_video{
border:5px solid red;}

    De toute façon puisque vous êtes à l'aide de la video tag, c'est un nouveau tag introduite en HTML5 pour fournir une meilleure sémantique, vous pouvez éviter d'utiliser un emballage div et de donner un id ou une classe directement à la video tag.
    Si votre HTML deviendrait comme ceci:

    <video class="youtube_video" width="700" height="525" controls src="video/promo_video.mp4" type="video/mp4">
</video>

    Et votre CSS deviendrait comme ceci:

    .youtube_video{
    border:5px solid red;}

    Voici un DÉMO

    • +1 pour la grande réponse 🙂 chapeau bas monsieur :',,,
    • merci 🙂 le webdesign est une de mes grandes passions. Chaque fois que je peux aider, je le fais avec plaisir. 🙂 Votre réponse est bonne de toute façon, encore du bon boulot 🙂
    • eh bien, @Fabio êtes-vous bon en css?
    • oui, je suis assez bon en css 🙂 @AspiringAqib
    • toute l'exemple de votre site? je suis à la recherche pour un peu de css designer 🙂
    • hmm j'ai fait quelques sites web, mais maintenant je n'ai pas d'exemples à montrer pour le moment. On peut en parler en privé, mais. @AspiringAqib
    • laissez-nous continuer cette discussion dans le chat

    InformationsquelleAutor Fabio
  2. 1
    div.yotube_video{
border:5px solid red;
}

    votre nom de classe ci-dessus est yotube_video et vous l'aviez tapé youtube_video

    • espérons que cela va aider 😉
    • oups!! Thx a lot. J'ai googlé pour près d'une heure!. merci encore une fois
    • n'oubliez pas d'accepter et d'upvote la réponse 😉
    • Votre réponse est correcte, de toute façon j'ai donné une meilleure réponse, car j'ai aussi corrigé quelques autres mauvaises choses dans le code html.
    • vous méritez upvotes 🙂 mieux répondre que moi 🙂
    • ahah..de toute façon je n'ai pas d'écrire de telles choses dans les commentaires :). J'ai juste écrit que parce que vous speedé avec "n'oubliez pas d'accepter et d'upvote la réponse" 🙂 de toute façon, parfois, d'autres peuvent fournir une réponse plus complète (il peut arriver aussi à moi parfois) la personne qui a posé la question qu'il juge à la fin 🙂 . De toute façon je dis cela pacifiquement 🙂 Nous venons de faire de notre mieux pour aider les autres 🙂 @AspiringAqib
    • notre devise pour aider les autres 🙂 allez!
    • oui, continuez le bon travail 🙂

    InformationsquelleAutor Muhammad Talha Akbar
  3. 0

    Appliquer classe sur votre video élément non surdiv

    video{
   border:5px solid red;
}

    Violon est ICI

    OU d'Autres façon de le faire est comme suit

    vous pouvez fournir une ID de votre video de l'élément de 

    <div>
        <video id="yotube_video" width="700" height="525" controls="controls" scrolling="no" >
            <source src="video/promo_video.mp4" type="video/mp4">
        </video>
 </div>

    et appliquer CSS sur que ID comme

    #yotube_video{
     border:5px solid red;
}

    Violon est ICI

    InformationsquelleAutor Usman