javascript - 小屏幕的 HTML 高度/宽度属性覆盖
问题描述
我正在为一个项目嵌入 Addpipe 记录器,它在 HTML 中采用 Height 和 Width 属性,但这会将其设置为固定大小,并且对于较小的屏幕不会按比例缩小。有没有办法覆盖 CSS 或 JavaScript 中的那些设置属性?
我尝试将 Height 和 Width 属性值设置为百分比和自动,但记录器消失了。它必须是 a4:3
或16:9
ratio。该网站使用媒体查询进行响应。对于小于 800 像素的屏幕,我需要更改 Piperecorder 的尺寸。我是一名初学者网页设计师,非常感谢任何帮助。谢谢!
您可以在这里查看到目前为止的外观:https ://fewnew.github.io/YNWA-web
<!-- begin video recorder code -->
<link rel="stylesheet" href="//cdn.addpipe.com/2.0/pipe.css" />
<script type="text/javascript" src="//cdn.addpipe.com/2.0/pipe.js"></script>
<piperecorder id="custom-id" pipe-width="640" pipe-height="390" pipe-qualityurl="avq/360p.xml" pipe-accountHash="22864bed1e4827f6798d501706aeb89f" pipe-eid="1" pipe-mrt="120"></piperecorder>
<!-- end video recorder code -->
解决方案
您可以通过#video
一些简单的步骤使用 jQuery 获取然后将其应用于记录器样式的大小:
首先,创建一个 IFEE 并将 jquery 传递$
给它以防止 JS 冲突:
(function($){
// next steps goes here...
})(jQuery);
然后创建一个函数来获取源视频样式,以便在以后的步骤中将其应用于目标视频:
(function($){
// We set a name "setVideoStyles" to function to call it later with
// this name.
// We pass 2 arguments to it: sourceVideo and targetVideo
// Later we pass '#video' as sourceVideo and '.pipeRecordRTC' as targetVideo
function setVideoStyles(sourceVideo, targetVideo) {
// Get sourceVideo (#video) width and height
var videoWidth = $(sourceVideo).width();
var videoHeight = $(sourceVideo).height();
// Create an object with #video current styles
// and set our variables to CSS, width and height are CSS attributes
// which we can apply with jQuery
var styles = {
width: videoWidth,
height: videoHeight
}
// Here we pass styles object as CSS method values with jQuery
// for the target video
$(targetVideo).css(styles);
}
})(jQuery);
现在我们可以将这个函数用于我们所有的目的:
(function($){
function setVideoStyles(sourceVideo, targetVideo) {
var videoWidth = $(sourceVideo).width();
var videoHeight = $(sourceVideo).height();
var styles = {
width: videoWidth,
height: videoHeight
}
// Here we get screen width on each resize
var windowWidth = $(window).width();
// We check if screen is equal or smaller than 800px
if(windowWidth <= 800) {
$(targetVideo).css(styles);
}
}
// Now we use document ready to apply the styles when page loads
$(document).ready(function() {
setVideoStyles('#video', '.pipeRecordRTC');
});
// And window on resize to apply when the user resize the window
$(window).on('resize', function() {
setVideoStyles('#video', '.pipeRecordRTC');
});
})(jQuery);
随时问任何问题。
注意:请注意我添加了一个我之前忘记的 if 语句。
注二:请查看 IFEE 部分,我做了一些更改
推荐阅读
- html - Firefox 可以显示 JP2 图像吗?
- c# - C# 在 Outlook、Skype for business 运行时读取 ost、pst 文件
- python - 使用python从Excel表格中提取图像
- vb.net - 使用 vb.net 使用公钥进行 pgp 加密
- angular - 如何防止 Angular 应用程序在 Index.html 中加载
- android - Parcelable Map的正确方法?
- joomla - 如何在 Joomla 中为插件添加参数?
- php - 根据列值动态选择列
- mongodb - StreamSets 获取 MongoDB 字段
- git - 如何从另一台计算机更新现有的 github 存储库?