5

私のページにvimeoのビデオを埋め込んでいます

<h4>Favopurite songs</h4>
<ul>
    <li>
        <a href="https://player.vimeo.com/video/9159308?autoplay=1" target="vimeoPlayer">
            Three little birds
        </a>
    <li>
</ul>

<section id="player">
    <iframe class="first" src="#" name="vimeoPlayer" width="200" height="150"
frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

私が持っているcssについて

iframe {filter: grayscale(100%)}

これはすべてのブラウザーで機能しますが、インターネット エクスプローラー 11 では機能しません。

Internet Explorer 10以降、フィルタープロパティが削除されたことを認識しています。

画像に提案され、それらの上にホバー効果がある複数のフィドルに出くわしました。

私は純粋に、ホバー効果なしで埋め込みビデオにグレースケール フィルターを追加しようとしています。

どんな助けでも大いに感謝します、ありがとう

4

1 に答える 1

10

これをさまざまなブラウザに使用します

iframe{
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}

IE11でテストします。

IE 11 が css フィルターをサポートしていない場合は、JavaScript ソリューションを使用して同じことを行う必要があります。

クロスブラウザのグレースケール

そのリンクでは、モダナイザーを使用してブラウザーを検出するなど、プロセスを詳細に説明しています。ただし、実装するのは大変な作業です。

于 2016-12-14T13:58:14.267 に答える