javascript - 小屏幕的 HTML 高度/宽度属性覆盖

Question

我正在为一个元素嵌入 Addpipe 记录器，它采用 HTML 中的 Height 和 Width 属性，但这会将其设置为固定大小，并且不会针对较小的屏幕进行缩小。有什么方法可以覆盖 CSS 或 JavaScript 中的那些设置属性吗？

我已尝试将高度和宽度属性值设置为百分比和自动，但记录器消失了。它必须是 4:3 或 16:9 比率。该网站使用媒体查询进行响应。对于小于 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 -->

Answer 1

您可以获取 #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部分，我做了一些修改