Youtube 视频播放器颤动

在制作网站或应用程序时，我们经常需要在页面中嵌入视频播放器以丰富网站的内容。在这个简短的教程中，我将向您展示如何使用 HTML5 / CSS3 来制作一个 YouTube 视频播放器颤动效果。

HTML 代码

首先，我们需要创建一个 HTML 代码来嵌入 YouTube 视频和控制器。

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
  <div class="play-icon"></div>
</div>

在代码中，我们使用了一个 DIV 元素来包装整个播放器。如果您不了解如何嵌入 YouTube 视频，请参考 YouTube API 文档。

控制器是通过 JavaScript 实现的，因此我们禁用了内置的控制器（controls=0）。

CSS 代码

接下来，我们需要一些样式来使播放器看起来更加漂亮。这里是我们要使用的 CSS 代码片段。

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  cursor: pointer;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.play-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://i.imgur.com/pfZ1JzB.png') no-repeat center center / contain;
  opacity: .7;
  transition: transform .3s ease-in-out;
}

.play-icon:hover {
  transform: scale(1.2);
}

这些样式将创建一个自适应、宽高比为 16：9 的视频容器。我们使用“padding-bottom: 56.25%”来设置高度，这对应于 16:9 长宽比。

播放器的圆形播放按钮是使用透明 PNG 图像实现的，该图像位于背景上。我们使用 CSS3 转换来实现按钮的半透明效果。

JavaScript 代码

最后，我们需要一些 JavaScript 代码来控制播放器。

var videoContainer = document.querySelector('.video-container');
var playIcon = document.querySelector('.play-icon');
var videoIframe = videoContainer.querySelector('iframe');

playIcon.addEventListener('click', function() {
  var player = new YT.Player(videoIframe);
  player.playVideo();
  videoContainer.classList.add('playing');
});

videoIframe.addEventListener('mouseenter', function() {
  playIcon.style.opacity = 1;
});

videoIframe.addEventListener('mouseleave', function() {
  playIcon.style.opacity = 0.7;
});

我们使用 JavaScript 创建了一个新的 YouTube 播放器实例，并将其绑定到 iframe 元素上。我们还在播放时为容器添加了一个 'playing' 类，以便我们可以采用不同的样式来响应用户的操作。

控制器图标的半透明效果是通过调整按钮的不透明度来实现的。当鼠标移动到 iframe 元素上时，我们将按钮不透明度设置为 1，当鼠标移开时，我们将其设置为 0.7。

结论

通过这个简短的教程，我希望您能够了解如何使用 HTML5、CSS3 和 JavaScript 来创建一个漂亮的 YouTube 视频播放器，给您的用户更好的体验。 Happy coding!