我无法在iFrame

时间:2016-01-10 22:04:15

标签: html css iframe youtube

我正在尝试让我的网站一起处理我的YouTube流媒体和实时聊天,但是流程工作正常,而聊天却没有...我只是获得了一个指向该流的链接," {{3} }",然后我将它放入iFrame中,但它并没有显示出来。我不知道为什么,因为如果你去链接,它会带你去聊天。任何帮助将不胜感激。



/*Some Fonts Here:*/
@font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
	font-family: Rusty;
	font-weight: Lighter;
}
.background
{
	background-image: url(0.jpg);
	background-attachment: fixed;
	background-size: 100% auto;
	background-color: f7f7f7;
	background-repeat: no-repeat;
	background-position:absolute;
}
.menubar {
  position: relative;
  height: 2.8vw;
  opacity: 0.85;
  background-color: #CCCCCC;
  z-index: 1;
}
.clearfix:after {
  display: block;
  clear: both;
}
.menu-wrap {
  width: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #3e3436;
}
.menu {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Ek Mukta';
}
.menu a {
  transition: all linear 0.15s;
  color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: rgba(189, 34, 34, 1);
}
.menu .arrow {
  font-size: 0.95vw;
  line-height: 0%;
}
.menu > ul > li {
  float: middle;
  display: inline-block;
  position: relative;
  font-size: 1.2vw;
}
.menu > ul > li > a {
  padding: 0.7vw 5vh;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
.menu li:hover .sub-menu {
  display: block;
}
.sub-menu {
  width: 100%;
  padding: 0px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  display: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 1.2vw;
}
.sub-menu li a {
  padding: 10px 10px;
  display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
  background: #3e3436;
}
.Rusty 
{
	font-family: "Rusty";
	color: rgba(189, 34, 34, 1);
	display: inline;
}
.content
{
	opacity: .85;
	position: relative;
	margin: auto;
    width: 80%;
	z-index: 0; 
    background-color: #CCCCCC;
    padding: 10px;
	height: 100%;
	text-align: center;
}
.menu > ul > .login 
{
    position: absolute;
    top: 0;
    right: 0;
}
.video-container {
	position:relative;
	padding-bottom: 5%;
	padding-top: 30px;
	width: 100%;
}

.video-container iframe, .video-container object, .video-container embed {
	position: relative;
	top:15%;
	width: 27vw;
	height:27vh;
}
.title
{
	text-align: center;
	font-size: 7vh;
	text-decoration: underline;
	-moz-text-decoration-color: inherit;
    text-decoration-color: inherit;
}
.feed-column
{
	width: 50%;
	height: 100%;
}
.border-right
{
	border-right: thick solid rgba(189, 34, 34, 1);
}
.text-center
{
	text-align: center;
}
.footer
{
    background: #CCCCCC;
	position:fixed;
    bottom:0px;
    height: 50px;
    width: 100%;
	opacity: .55;
	margin: auto;
}
.yt-title
{
	font-size: 3.3vh;
}
.stream
{
	height: 45%;
	width: 100%;
	padding-bottom: 5%;
}
.streamindicator
{
	border:none;
	width:100%
}
.column
{
	padding: 15px;
	float: left;
}
.margin-auto
{
	margin: auto;
	float: left;
}
.streamcontents
{
	frameborder: 0; 
	scrolling: "no";
	padding-left: 2.5%;
	padding-right: 2.5%;
}

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
    name="www-subscribe-widget" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://apis.google.com/js/platform.js"></script>
    <script src="script.js"></script>
    <link rel="shortcut icon" href="favicon.ico" />
    <title>RG - Home</title>
  </head>
  <body class="background">
    <div class="menubar">
      <nav class="menu">
        <ul class="clearfix">
          <li>
            <a href="aboutme.html">About Me 
            <span class="arrow">▼</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#">Gaming</a>
              </li>
              <li>
                <a href="#">Programming</a>
              </li>
              <li>
                <a href="#">YouTube</a>
              </li>
              <li>
                <a href="#">Other</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="schedule.html">Schedule</a>
          </li>
          <li class="current-item">
            <a href="#">
              <img style="width: 2.3vh; height: 1.6vw;" align="left" src="favicon.ico" />
              <p align="middle" class="rusty">RedstoneGaming</p>
              <img style="width: 2.3vh; height: 1.6vw;" align="right" src="favicon.ico" />
            </a>
          </li>
          <li>
            <a href="equipment.html">Equipment</a>
          </li>
          <li>
            <a href="comment.html">Contact Me</a>
          </li>
          <li class="login">
            <a href="login.html">Login/Sign Up</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="rusty title">ThatRedstoneGuy&#39;s Feed</h1>
      <!--<div class="stream">
        <iframe class="margin-auto streamcontents" width="50%" height="100%" frameborder="0" scrolling="no" src="http://www.twitch.tv/vikkstar123/embed"></iframe>
                <iframe class="streamcontents" width="50%" height="100%" frameborder="0" scrolling="no" src="http://www.twitch.tv/vikkstar123/chat?popout="></iframe>
      </div>-->
      <!--The stream code is here:-->
      <div class="stream">
      <iframe class="margin-auto streamcontents" width="50%" height="100%"
      src="https://www.youtube.com/embed/s2DZdjT0gtc"></iframe> 
       <!--The chat code is here:-->
      <iframe class="streamcontents" width="50%" height="100%"
      src="https://www.youtube.com/live_chat?is_popout=1&amp;v=s2DZdjT0gtc"></iframe></div>
      <div class="border-right feed-column">
        <!--itemsleft-->
        <h1 class="rusty text-center yt-title">Colortone | Am I colorblind?! | W/Voiceless</h1>
        <div class="video-container">
          <iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
        </div>
      </div>
      <div class="feed-column">
        <!--itemsright-->
      </div>
    </div>
    <div class="footer">
      <div class="border-right column">
        <div class="feed-column g-ytsubscribe" data-channel="ThatRedstoneGT" data-layout="default" data-count="default"></div>
      </div>
      <div class="column">
        <iframe class="feed-column streamindicator" src="http://streambadge.com/twitch/light/ThatRedstoneGT/"></iframe>
      </div>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

YouTube不允许嵌入聊天。 They're working on it.