我在YouTube上嵌入了一个视频链接,用于放入我的网站用于学校,当我粘贴并刷新视频时,视频已经对齐。 我试过调试它并尝试了几个不同的但没有工作。我重新研究并发现没有修复(搜索30分钟) 谁能提供帮助?还是因为我有一个响应式设计?
<iframe class="right" width="1000" height="500" src="https://www.youtube.com/embed/V_qlumZ5K4I" frameborder="0" allowfullscreen></iframe></object>
这是Just My website BELOW
<!DOCTYPE html>
<html>
<head>
<title>
Road to a healthier lifestyle
</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link href="assets/css/main.css" rel="stylesheet">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<header id="header">
<h1>
<a href="index.html">Healthy living</a>
</h1><a href="#nav">Menu</a>
</header><!-- Nav -->
<nav id="nav">
<ul class="links">
<li>
<a href="index.html" type="square">Home</a>
</li>
<li>
<a href="generic.html" type="square">Diabetes & obesity</a>
</li>
<li>
<a href="elements.html" type="square">Ways to play less video games</a>
</li>
</ul>
</nav><!-- Main -->
<section class="wrapper" id="main">
<div class="container">
<header class="major special">
<h2>
Road to a healthier lifestyle
</h2>
<p>
Ways to play less video games
</p>
<a><div class="seperate"></div></a>
<object>
<iframe align="center" allowfullscreen="" frameborder="0" height=
"500" src="https://www.youtube.com/embed/Y5RSngCFpsc" width=
"1000"></iframe>
</object>
</header>
<ul>
<li>I. Think of why you wanted to stop gaming? Make reasons why you
want to stop. This will help you understand.
</li>
<li>II. Make a note of how long you play every day. Then cut off an
hour every day. This sort of progressive reduction will help your
body adjust to the change, and doesn’t feel like your removing an
important part of your daily life.
</li>
<li>III. Think of all the reasons you want to quit gaming for. What
are the alternative things you could be doing? This might be
improving your studying, learning a new hobby, seeing friends more
often, spending more time with your family and/or pets, going out
more, taking up a sport, etc.
</li>
<li>IV. When stopping something you love, it will hurt. You should be
strict all the same, as cutting down requires removing the desire to
play. Play for only a couple of hours on weekends, after you've
finished your chores and the other things you want to do.
</li>
<li>V. Tell your parents to remind you to turn it off at a particular
time. Make sure you turn it off at the designated time. No matter
what checkpoint you need to reach, even if it's online or if it gets
you banned.
</li>
<li>VI. If asking your parents doesn't work, download this simple
software that will force your computer to shut down at a designated
time:
http://www.konradp.com/products/auto_shutdown/download/autoshutdown.exe
</li>
<li>VII. Set the time with the Force shutdown option to 2 hours
lesser that what you did on your previous day. As the computer shuts
off, unplug the mouse and keyboard.
</li>
<li>VIII. If you are a hardcore gamer who is active on the
forums/public chat, then make a thread about you quitting - make it
public. This will make your resolve stronger.
</li>
<li>IX. Try asking someone to hide your games from you for a few
hours and gradually go up to a few days, weeks, months etc.
</li>
<li>X. Try doing other things to get your mind off gaming. Some
examples are reading, sports, helping around the house, etc.
</li>
<li>XI. Never try to sneak onto video games, as this will make you
want to play more and more and more. You will inevitably be
discovered.
</li>
<li>XII. Don't try to prolong your gaming time. Things you should
avoid include "May I please play 5 more minutes", "I need to finish
this up or it won't save", and "I'm in the middle of something".
Video games are no longer the highlight of the day. You have better
things you would rather do, like reading, a sport, or another
activity that is healthy for your mind and body.
</li>
<li style="list-style: none; display: inline">
<p>
Tips
</p>
</li>
<li>o •You don't have to give them up completely. Just strictly limit
how long you play
</li>
<li>o •Whenever you feel that urge to play, resist it by occupying
your hands with something else.
</li>
<li>o •Try to study harder and keep a timetable.
</li>
<li>o •Avoid anything to do with gaming, even something as simple as
searching the internet for gaming reviews or forums.
</li>
<li>o •Get a knack for the more rewarding real life game. Read and
practice.
</li>
<li>o •Organize your stuff.
</li>
<li>o •Understand that you can survive without video games.
</li>
<li>o •Drink water and rest your eyes often.
</li>
<li>o •Workout and exercise, eat fruits and stay healthy.
</li>
<li>o •Know your limits and don't try do so much in short time.
</li>
<li style="list-style: none; display: inline">
<div class="seperate"></div>
</li>
</ul>
</div>
</section><iframe allowfullscreen="" class="right" frameborder="0" height=
"500" src="https://www.youtube.com/embed/V_qlumZ5K4I" width=
"1000"></iframe> <!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li>
<a class="icon fa-facebook" href="#"><span class=
"label">Facebook</span></a>
</li>
<li>
<a class="icon fa-twitter" href="#"><span class=
"label">Twitter</span></a>
</li>
<li>
<a class="icon fa-instagram" href="#"><span class=
"label">Instagram</span></a>
</li>
<li>
<a class="icon fa-linkedin" href="#"><span class=
"label">LinkedIn</span></a>
</li>
</ul>
<ul class="copyright">
<li>© By Ahmad abu shawar 9y
</li>
</ul>
</div>
</footer><!-- Scripts -->
<script src="assets/js/jquery.min.js">
</script>
<script src="assets/js/skel.min.js">
</script>
<script src="assets/js/util.js">
</script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js">
</script>
</body>
</html>
答案 0 :(得分:1)
您可以将iframe
放在div
中,并将div
居中。
答案 1 :(得分:1)
如果你添加这个css:
.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; margin: auto;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.container {width: 100%; max-width: 300px; margin: auto;}
并像这样构建你的html:
<div class="container">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/V_qlumZ5K4I" frameborder="0" allowfullscreen></iframe>
</div>
</div>
您的iframe将在宽度和高度上做出响应,并且适合放入的任何间隙(这应该可以帮助您使网站响应)以及在您的网页上居中。只需更改max-width
上的.container
即可控制您希望视频的最大宽度。
这是向您展示的小提琴:https://jsfiddle.net/98e0ms1u/1/
答案 2 :(得分:0)
要将iframe居中,您需要为其指定display: block
。
例如:
iframe {
display: block; // set display type
margin: 0 auto; // align center
}
由于我们无法看到您当前的样式表,因此将您的CSS添加到帖子中可能会有所帮助。