css - 调整 Wordpress 小部件的宽度百分比

Question

当我从桌面查看 www.aryaziai.com 时，我的网站侧边栏小部件看起来不错。但是，我遇到的唯一问题是，当我查看我的网站的移动版本时，“精选视频”侧边栏伸出框架并与黑色背景有点重叠。

在一天结束时，我不想手动更改 youtube 视频的宽度/高度，我只想让“精选视频”小部件的宽度自动调整为小部件标题的大小（蓝色块的东西） .. 这很有趣，因为 youtube 视频的大小与在桌面上查看时的小部件标题相同，但小部件标题在移动设备中保持完美大小..

有任何 100% 宽度的代码可以解决这个问题吗？谢谢

Answer 1

如果我理解正确，即使div您正确调整了 YouTube 视频的大小，也无法让您的 YouTube 视频调整到屏幕宽度。如果是这样，请阅读Chris Coyier 关于调整 YouTube 视频大小的文章。

您可以在 jQuery 中完成所有这些操作（如果您正在使用它），这是 Chris 的代码：

$(function() {

    // Find all YouTube videos
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

        // The element that is fluid width
        $fluidEl = $("body");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
            .data('aspectRatio', this.height / this.width)

            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    $(window).resize(function() {

        var newWidth = $fluidEl.width();

        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();

});