小编nHa*_*ins的帖子

如何设置mediaelement.js以缩小视频以适应小屏幕尺寸,但不能将它们放大到超过实际尺寸？(除了将它包装在一个正确大小的div中之外,如果我找不到更好的解决方案,这将是我会回归的.)

我已经尝试过设置style="max-width: 100%;,这可以在我自己的服务器上使用视频在Firefox中运行,但是在Chrome和Firefox和Chrome中链接到YouTube视频时,视频将按比例放大以填充容器,无论为此设置的值width=""和height=""值如何<video>标签.

我将举例说明我的HTML和输出的第一部分.下列:

<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>

在Firefox中生成这个(这是我想要的):

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>

这在Chrome中(这不是我想要的):

<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video>

是否有可接受的方法来实现这一目标？

我正在寻找垂直对齐列表项中的文本。我正在使用display: flex;和align-items: center;。但我的代码包含一个strong标签，它被解释为一个单独的弹性项目，因此两侧的空格都会折叠起来。

我可以用 破解它 ，但是有没有一种正确的方法可以让我的文本（带有内联元素）垂直居中对齐？

• 我知道我可以将文本包装在<p>. 我正在努力避免这种情况。
• 我的文本可能足够长，可以换行，所以line-height不是一个选择。
• 一旦显示：内容；得到广泛支持，这将是我的首选解决方案。

li {
  display: flex;
  align-items: center;
  height: 8em;/* just for example */
  border: 2px solid red;/* just for example */
}

<ul>
  <li>It is <strong>Very important</strong> that this text is vertically centered!</li>
  <li>Also <strong>Very important</strong> that there are spaces in the text.</li>
</ul>

我想选择所有带有任何id的h2.

我已经尝试了h2#*哪些是无效的,我已经尝试了属性选择器h2[id*=''],但是这不会接受通配符,并且将其留空(如上所述,qoutes之间没有任何内容).

有没有我错过的,或者这只是一个死胡同？

是的,我可以添加一个类.

我想创建一个脚本,它将为没有特定类的第一个子类添加一个类,每个父类都有一个特定的类.例如:

<div class="wrap">
  <p class="no">1. Not this one please</p>
  <div>
    <p>2. not this either</p>
  </div>
  <p>3. Make this red!</p>
  <p>4. Not this</p>
</div>
<div class="wrap">
  <p class="no">5. Not this one please</p>
  <p>6. Make this red also!</p>
  <p>7. Not this</p>
</div>

我的javascript如下:

$('div.wrap').find('p:not(.no):first').addClass('red');

这将选择后代而class="no"不是第一个孩子(因此第2项,而不是上例中的第3项).我已尝试更改.find为.children,但之后它只选择页面上的第一个示例,而不是每个集合中的第一个示例(因此上面示例中只有项目2,而不是项目6).

这是一个说明上述http://cdpn.io/izGDH的codepen