0
私はこの動画を、私がこのテーマで見つけたいくつかのチュートリアルを使ってページ上で動的にサイズを変更することができました。しかし、それはページの中央に正しく表示されません。埋め込みYouTube動画のサイズを動的に変更することはできませんか？
どうすればいいですか？私が見落とした埋め込みビデオを動的にサイズ変更する簡単な方法はありますか？
ありがとうございます。
* {
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>