邊框標籤不能在HTML5視頻標籤周圍工作

我想在我的網站上播放的視頻周圍放置紅色邊框。這是我的代碼。邊框標籤不能在HTML5視頻標籤周圍工作

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

和樣式表包括

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

爲什麼我不能讓周圍的視頻邊框。請幫忙。另外，是否有任何聯機幫助可以讓視頻更具藝術性？

由於提前， aqzr

來源

2013-01-01 shriguru nayak

如果你滿意的答案，請投票選出最佳答案，並接受它作爲答案。通過這樣做，你鼓勵人們在這裏通過計算器幫助別人。 @shriguru nayak – Fabio

在你的HTML你寫道：

<div class="yotube_video">

然後在你的CSS，你寫道：

div.youtube_video

HTML和CSS類名稱應該是相同的。在您的HTML文件中，您忘記了「u」。它應該是這樣的：

HTML

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

controls="controls"不存在。如果你想啓用它們，你只需要寫controls。 scrolling不存在。那麼只有當您爲不同的瀏覽器提供以不同格式編碼的多個源文件時，您才需要標籤source。在你的例子中，它不應該是必要的。只需使用src就足夠了。

CSS

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

不管怎麼說，因爲你使用的是video標籤，那就是在HTML5引入了一個新的標籤，以提供更好的語義，你能避免使用包裹div並給出一個id或一個類直接到video標記。所以你HTML會變成這個樣子：

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

而且你CSS會變成這個樣子：

.youtube_video{ 
    border:5px solid red;}

這裏有一個DEMO

來源

2013-01-01 06:16:01 Fabio

+1爲偉大的答案:)帽子關：先生，',,, –

@AspiringAqib謝謝:)網頁設計是我的一個偉大的激情。每當我可以幫忙的時候，我都會樂於助人。 :)無論如何，你的回答是正確的，所以仍然很好:) – Fabio

好吧，@Fabio你擅長css嗎？ –

應用類的video元素不上div

video{ 
    border:5px solid red; 
}

小提琴是HERE

OR做，這是如下

其他方式

你可以提供一個n您的video元素ID作爲

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

，並在該ID作爲

#yotube_video{ 
    border:5px solid red; 
}

小提琴申請CSS是HERE

來源

2013-01-01 06:01:36 Usman

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

你的類名以上yotube_video和你輸入了youtube_video

來源

2013-01-01 06:06:48

希望這會有所幫助;） –

哎呀！多謝。我搜索了近一個小時！ thx再 –

不要忘記接受並upvote答案;） –

邊框標籤不能在HTML5視頻標籤周圍工作

回答

相關問題