如何通过CSS调整GIF尺寸适配Youtube视频播放器缓冲加载动画

解决方案 #

将以下CSS代码追加到你现有CSS的末尾即可，不需要修改或删除原有规则，新增的同名选择器属性会自动覆盖原有生效规则：

.ytp-spinner {
    /* 保证容器占满播放器全宽，z-index设有效值避免被遮挡 */
    z-index: 10 !important;
}

.ytp-spinner-container {
    /* 取消fixed定位，背景改为相对于容器定位 */
    background-attachment: scroll !important;
    /* 自动缩放GIF完整显示在容器内，无裁切 */
    background-size: contain !important;
    /* 左对齐设置：left设为0，取消原有的负左边距 */
    left: 0 !important;
    margin-left: 0 !important;
    /* 调整容器尺寸，20%可以根据你需要的大小自由修改 */
    width: 20% !important;
    /* 容器高度和宽度保持同比例，匹配GIF比例即可 */
    padding-bottom: 20% !important;
    /* 垂直居中对齐 */
    margin-top: -10% !important;
}

参数调整说明 #

• 如需调整GIF大小，同步修改width和padding-bottom的数值即可，两个参数保持一致就能保证GIF不变形
• 如需恢复居中对齐，把left: 0改回left: 50%，margin-left: 0改回margin-left: -10%即可（10%是width数值的一半）
• 如果GIF有透明背景显示异常，可以额外加background-color: transparent !important;到.ytp-spinner-container规则里

内容的提问来源于stack exchange，提问作者Kali