通過CSS定位嵌入式視頻

我想重現一個類似於Youtube的佈局來練習我剛剛學到的一些東西。我如何重新定位嵌入的Youtube視頻？通過CSS定位嵌入式視頻

我試圖用display: relative製作一個嵌入式視頻的父級div，但它沒有出現問題。

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title> 
</head> 

<body> 
<div id="header">      <!-- Top header with logo, search bar, upload button--> 
    <a href="http://www.youtube.com" id="logo"> 
     <div id="blue"> Blue</div> 
     <div id="tube">Tube</div> 
    </a> 
    <form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get"> 
      Search <input type="text" name="searchinput"> 
      <input type="submit" value="Submit"> 
    </form> 
    <a href"http://www.amazon.com" id="uploadparent"> 
     <div id="upload">Upload</div> 
    </a> 


</div> 


<div id="videobox"> 
    <object width="420" height="315"> 
    <param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"> 
    </param><param name="allowscriptaccess" value="always"> 
    </param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"> 
    </embed></object> 

</div> 

<div id="column_box_right"></div>  <!-- Related Videos spans the Right side! --> 
<div id="column_box_left>ddddddddddddddddddddddd</div>  <!-- column spans the left side! --> 
<div id="vidinfo"></div> 

<div id="footer"></div>

CSS：

html body { 
width: 100%; 
} 

#header { 
    height: 35px; 
    background-color: grey; 
    margin-top: -6px; 
    position: relative; 
    margin-left: -7px 
    overflow: auto; 
    min-width: 1000px; 
} 

#blue { 
    height: 35px; 
    width: 60px; 
    background-color: grey; 
    border-radius: 4px; 
    text-align: center; 
    color: blue; 
    display: inline-block; 
    font-size: 20px; 
    font-family: Verdana; 
} 
#logo { 
    float: left; 
    margin-right: 14%; 
} 
#tube { 
    height: 35px; 
    width: 60px; 
    background-color: blue; 
    border-radius: 4px; 
    text-align: center; 
    display: inline-block; 
    color: white; 
    font-size: 20px; 
    font-family: Verdana; 
} 
#upload { 
    height: 30px; 
    width: 100px; 
}

來源

2013-05-16 zzz2991

爲了記錄，這是一個優秀的帖子（特別是對你的第二個）。+1包括代碼示例以及jsfiddle。 –

你必須在你的#videobox DIV的額外空間。將其從#video box更改爲#videobox允許div在您的jsfiddle中正確放置。我不確定這是否是您網站上的問題，但由於大多數複製和粘貼，我想我會把它扔到那裏。

來源

2013-05-16 17:21:58

啊，謝謝一堆！ – zzz2991

不客氣。祝你網站好運！ –

這將移動你的videobox div在任何你想在屏幕上。這會將其移至中心。

#videobox { 
display: block; 
height: 100%; 
left: 25%; 
position: absolute; 
top: 25%; 
width: 100%; 

}

來源

2013-05-16 17:25:48 Cam

通過CSS定位嵌入式視頻

回答

相關問題