Question

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

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

任何可以解决此问题的100％宽度代码？感谢

Answer 1

如果我理解正确，即使您正在调整其中的div正确调整大小，您也无法将YouTube视频调整为屏幕宽度。如果是，请阅读Chris Coyier's article on resizing YouTube videos。

你可以在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();

});

调整Wordpress Widget的宽度％

1 个答案: