動画メインビジュアル - 動画メインビジュアル1-1

ソースコード

ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。

デザインコンポーネントについて

HTML

以下のコードをmain要素直下に配置します。

    <hr class="mf-hr mf-col-1 mf-width-fullexpand" style="display: none">

    <div class="mfc-mainvisual mfc-mainvisual-003-001-1">
        <div class="mfc-mainvisual-video">
            <video playsinline autoplay muted loop>
                <source src="/assets/gcmf/images/design-components/1.mp4" type="video/mp4">
            </video>
        </div>
        <div class="mfc-mainvisual-content">
            <h1>見出し</h1>
            <p>テキスト</p>
            <a class="mfc-link" href="#">リンク</a>
        </div>
    </div>