如何将来自youtube的HTML5嵌入视频中心化?

时间:2015-10-26 16:12:26

标签: html html5 responsive-design html5-video

我在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>&copy; 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>
很多人,我设法解决了它

3 个答案:

答案 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添加到帖子中可能会有所帮助。