Question

我目前正在建造一个超轻型的＆＃34; youtube播放器专注于快速页面加载和所需的最少资源。

我们的想法是拥有一个空的iframe，并仅使用定位iframe的链接加载youtube embed网址。

这样，youtube内容和/或脚本不会在页面加载时加载，而是仅在用户决定查看该内容后加载。

我使用低分辨率youtube视频海报作为背景图像，并将链接外观和感觉定制为播放按钮。

我现在的主要障碍是如何在点击后隐藏播放按钮。

我能够使用＆＃34;：focus＆＃34;来模拟隐藏效果。 CSS中的选择器，但它不是更好的方法，因为如果你点击其他地方甚至隐藏按钮，按钮会显示或iframe重新加载。

我知道我可以做这个jquery或javascript方式，但我真的想在纯html + css上运行我的所有应用程序

任何人都可以提供帮助？最好的问候和提前感谢

codepen：http://codepen.io/s3m3nT3s/pen/NdwEMx

＆＃13;

* {
  margin: 0;
  padding: 0;
}

#video {
  width: 100%;
  max-width: 700px;
  position: relative;
  background: url(http://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}

#video::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

#video a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 68px;
  height: 48px;
  background-color: #1f1f1f;
  opacity: 0.8;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 48px;
  border-radius: 17px/13px;
}
#video a:hover {
  background-color: #cd201f;
  opacity: 1;
}
#video a:focus {
  opacity: 0;
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
}

＆＃13;

<div id="video">
  <iframe name="youtube-video"></iframe>
  <a href="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;showinfo=0&amp;autoplay=1" target="youtube-video" rel="nofollow">&#9654;</a>
</div>

＆＃13;

Answer 1

我已经让我的代码工作了......

使用数据uri制作它，例如：

＆＃13;

* {
  margin: 0;
  padding: 0;
}

#video {
  width: 100%;
  max-width: 700px;
  position: relative;
  background: url(http://img.youtube.com/vi/c73BsSHOCwQ/mqdefault.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}

#video:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

#video:after {
  content: "▶";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 68px;
  height: 48px;
  background-color: #1f1f1f;
  opacity: 0.8;
  text-align: center;
  color: #fff;
  line-height: 48px;
  border-radius: 17px/13px;
  z-index: 1;
}

#video:hover:after {
  background-color: #cd201f;
  opacity: 1;
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
  z-index: 2;
}

＆＃13;

<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
<div id="video">
	<iframe src="data:text/html;charset=utf-8,%3Ca%20style%3D%22display%3Ainline-block%3Bwidth%3A100%25%3Bheight%3A100%25%22%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fc73BsSHOCwQ%3Frel%3D0%26showinfo%3D0%26autoplay%3D1%22%20rel%3D%22nofollow%22%3E%3C%2Fa%3E" allowfullscreen></iframe>
</div>

＆＃13;

此致

超轻型YouTube播放器

1 个答案: