文章/答案/技术大牛

发布

社区首页 >问答首页 >如何集中我的HTML5嵌入式视频从youtube？

问如何集中我的HTML5嵌入式视频从youtube？
EN

Stack Overflow用户

提问于 2015-10-26 16:12:26

回答 3查看 1.5K关注 0票数 0

我嵌入了一个来自YouTube的视频链接，放到我的网站上供学校使用，当我粘贴它并刷新视频时，视频是对齐的。我试过调试它，并尝试了几个不同的，但都没有工作。我重新考虑，没有发现任何固定的(搜索了30分钟)，有人能提供帮助吗？还是因为我有一个反应灵敏的设计？

<iframe class="right" width="1000" height="500" src="https://www.youtube.com/embed/V_qlumZ5K4I" frameborder="0" allowfullscreen></iframe></object>

这只是我的网站

<!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>

很多人，我设法修好了

html

responsive-design

html5-video

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-10-26 16:20:28

要将一个iframe作为中心，您需要将display: block分配给它。

例如：

iframe {
   display: block; // set display type
   margin: 0 auto; // align center
}

由于我们无法看到您当前的样式表，将css添加到文章中可能会有所帮助。

票数 0

Stack Overflow用户

发布于 2015-10-26 16:21:24

您可以将iframe放在div中，并将div设为中心。

票数 1

Stack Overflow用户

发布于 2015-10-26 17:00:02

如果添加此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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33350496

复制

相似问题

问如何集中我的HTML5嵌入式视频从youtube？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何集中我的HTML5嵌入式视频从youtube？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何集中我的HTML5嵌入式视频从youtube？
EN