YouTube使复制视频嵌入变得容易。
喜欢！
但是，默认的嵌入不会响应迅速
我已经和我一起在互联网上吸毒了多年。
/* youtube embed wrapper */
[data-responsive-youtube-container] {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin: 1em 0;
}
[data-responsive-youtube-container] > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
我将其改编成使用AVO 🥑 CSS，我的数据属性BEM。
但是我没有写这些样式。
我讨厌像56.25%这样的魔术数字，我会试图避免它，直到放弃ð
用法
- 复制从共享表中嵌入的YouTube。
- 嵌入HTML或Markdown文件中的粘贴。
- 将其包裹在带有
data-responsive-youtube-container选择器的块元素容器中。 - 享受辅助感知的响应视频！
<div data-responsive-youtube-container>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/u63pOK6Zyog"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
响应地嵌入！
奖金
这也适用于布局。
在chan.dev附近，您会看到它与Flex and Grid布局配对。
帮我归因于这个
如果您知道我最初从哪里刷卡，请让我知道，以便我可以在这里给作者信用。
我是Twitter和Discord上的@chantastic。