0
所以我設法得到這個YouTube視頻動態調整大小在頁面上使用我發現的主題上的一些教程。但它不會在頁面上正確居中。動態調整嵌入的YouTube視頻的大小不會中心？
我該怎麼做呢？是否有一種更簡單的方式來動態調整我忽略的嵌入式視頻的大小？
謝謝你們和gals。
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #F7F3FB;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* GALLERY */
a:-webkit-any-link {
text-decoration: none;
/* ignoring default link settings */
}
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1;
/* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0em 0em;
/* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block;
/* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 {
/* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
/* VIDEO PAGE */
.video {
text-align: center;
padding: 0;
width: 50%;
}
video {
width: 50%;
}
.description {
font-size: 1.25em;
}
.job {
font-weight: bold;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
<a href="index.html">Home</a> -
<a href="film.html">Film</a> -
<a href="photography.html">Photography</a> -
<a href="about.html">About</a> -
<a href="contact.html">Contact</a>
</p>
</div>
<hr>
<div class="video">
<h2>Silver</h2>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hW3_awq0-lk" frameborder="0" allowfullscreen></iframe>
</div>
<p>Silver is a short film following the first meeting of a young adopted boy with his neighbour.</p>
<p>Jobrole: Production Designer.</p>
</div>
</body>
<footer></footer>
</html>