Question

这是jsfiddle：http://jsfiddle.net/xibalbian/L4znJ/

我正在尝试嵌入一个随机视频，并希望让它具有响应性。

<div id="full-video">
<div class="fullvid">
<div class="video" style="margin-left:16.25em;">
    <iframe width="840" height="480" src="//www.youtube.com/embed/WeYsTmIzjkw?rel=0" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe></div>
</div>
</div>

我想要实现的是一个简单的网站，顶部有一个标识，标语与徽标一起显示，并在屏幕中间垂直显示正下方的视频。另外，我怎样才能使这些全部响应？我无法测试字体是否正常工作，我正在使用localhost。如果您发现任何错误，或者您可以向我展示另一个错误以及最好的方法，请帮我修复它们。

Answer 1

示例： http://jsfiddle.net/LFpU5/

自定义编辑HTML：

<div class="video" style="margin-left:16.25em;">

有关：

<div class="video margin">

CSS响应：

.margin {margin-left:16.25em;}

@media only screen and (max-width: 480px) {
    .margin {margin-left:0;}
    .logo {
        float: none;
        width: auto;
    }
    .banner {
        width: auto;
    }
    .video iframe,
    .video object,
    .video embed {
        width: 100%;
        height: auto;
        display:block;
    }
}

Answer 2

我会摆脱#video中的边距并从iframe中删除width / height属性。 width =“840”height =“480”并替换为类似下面的内容应该是响应

style =“display：inline-block; width：100％; min-height：250px;”

关于字体，如果您要下载字体并自行托管，则需要在htaccess中启用一些设置，请参阅此帖SVG gradient backgrounds doesn't work

更简单的选择是在https://www.google.com/fonts上使用字体，然后您无需担心任何服务器内容。

如何使这个标识，标语和视频响应？

2 个答案: