動画広告

広告枠の広告種別に動画を設定している場合、動画広告が再生されます。

動画枠は表示のカスタマイズが行えます。以下で解説します。

動画用のパラメータ

広告タグにパラメータを付加することで表示をカスタマイズすることができます。

指定可能なパラメータを以下に示します。

parameter	type	desc	e.g.	note
`data-rfp-video-widthdata-rfp-video-height`	CSS Text	動画の幅・高さ	`100%` `50vw`	幅指定あり、高さ未指定の場合、幅に合わせてなりゆきとなる両方未指定の場合はVAST内の幅・高さが用いられる
`data-rfp-video-on-ended`	Function name	動画終了時に呼ばれる関数名	`onVideoAdEnded`
`data-rfp-video-close-button`	Boolean string	閉じるボタンの有無	表示: `1` `true` 非表示: `0` `false`
`data-rfp-video-optout-button`	Boolean string	オプトアウトボタンの有無	表示: `1` `true` 非表示: `0` `false`	飛び先は `https://js.fout.jp/info/privacy.html`
`data-rfp-video-on-no-ads`	Function name	広告がない場合に呼ばれる関数名	`onVideoNoAds`
`data-rfp-video-loop`	String	ループ再生を行うか	ループしない: `none` または指定なし最後をループ: `last`

記述例:

    <div id="RFP_AD_NDgxOjUx">
        <ins data-rfp-display-adspot-id="NDgxOjUx"
             data-rfp-video-width="50vw"
             data-rfp-video-on-ended="onVideoAdEnded"
             data-rfp-video-close-button="true"
             data-rfp-video-optout-button="true"
             data-rfp-video-on-no-ads="onVideoNoAds"
             style="display:none"></ins>
    </div>

いずれのパラメータも任意ですが、動画の幅 (data-rfp-video-width) を指定しておきましょう。幅のみ指定した場合はなりゆきで高さが決定されます。

CSSによるカスタマイズ

CSSを追加することにより見た目のカスタマイズが可能になります。例えば以下のように記述することにより、スティッキー表示とすることができます。

#RFP_AD_NDgxOjUx .rfp-video-ad-view {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

指定しない場合	指定した場合

再生終了時にコールバック関数を実行する

data-rfp-video-on-ended を指定することにより、動画再生終了時に任意の関数を実行することができます。引数として .rfp-video-ad-view 要素が渡されるのでそれに対して操作を行うこともできます。

以下では例として再生終了時にフェードアウトして消える効果を追加しています。

#RFP_AD_NDgxOjUx .rfp-video-ad-view {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99999;
    opacity: 1;
    transition: opacity 1s linear;
}
#RFP_AD_NDgxOjUx .rfp-video-ad-view.hide {
    opacity: 0;
}

function onVideoAdEnded(el) {
    console.log('video ended');
    el.addEventListener('transitionend', function() {
        el.querySelector('.rfp-video-close-button').click();
    });
    el.className += ' hide';
}

広告がない場合にコールバック関数を実行する

data-rfp-video-on-no-ads を指定することにより、枠に対応する広告がない場合に任意の関数を実行することができます。引数として、 Ad Spot ID とプレースホルダのHTML要素が渡されるのでそれに対して操作を行うこともできます。

<div id="RFP_AD_NDgxOjUx">
    <ins data-rfp-display-adspot-id="NDgxOjUx"
         data-rfp-video-width="50vw"
         data-rfp-video-on-ended="onVideoAdEnded"
         data-rfp-video-close-button="true"
         data-rfp-video-optout-button="true"
         data-rfp-video-on-no-ads="onVideoNoAds"
         style="display:none"></ins>
</div>
<script>
    function onVideoNoAds(adSpotId, el) {
        console.log('No Video Ads: ' + adSpotId);
        OtherAdLoader.loadAd(el);
    }
</script>