iframe - Tippy js youtube 嵌入响应式
问题描述
我正在尝试使用以下代码将 youtube 视频嵌入到tippy中。我能做到的最好的设置 min-width: 400px; 在 yt 容器上。没有那个视频甚至不会显示。有没有办法让它变宽,因为它适合视口但仍然在小屏幕上保持响应?Tippy 被添加到正文中。
.yt-container {
overflow: hidden;
position: relative;
width:100%;
min-width: 400px;
}
.yt-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.yt-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
tippy('#myButton', {
content: '<div class="yt-container"><iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>',
allowHTML: true,
interactive: true,
trigger:'click',
});
解决方案
推荐阅读
- angular - 如何使用 Firebase 和 Ionic 和 Cordova 记录事件
- ios - 正则表达式从 URL 字符串中提取 Spotify 艺术家 ID
- java - AWS Systems Manager Parameter Store:在 Java (Lambda) 中使用 StringList 作为键值对
- android - 离子构建失败“意外元素
在发现 " - python - python 正则表达式查找和散列用户名
- project-reactor - Reactor-netty TCPClient 无法接收响应
- java - 为什么更高效的算法运行得更慢?
- javascript - 如何将 JSON 数据显示为 HTML?
- php - 在 while 语句中使用 div 的正确方法?
- apache-spark - Spark 仓库 VS Hive 仓库