テキストリンクから動画をポップアップさせて表示する

movie-popup-thumbnail

リンクから動画をポップアップさせて表示する方法を紹介します。

例えば、以下のような文を書いた場合の
下線の部分をポップアップリンクにしてみます。

猫背矯正のモニターに参加していただいたS様のご感想です。


猫背矯正のモニターに参加していただいたS様のご感想です。


このようにポップアップリンクを使うことで、

  • 文に集中してもらえる
  • 動画のスペースを使わないで済む

という利点があります。

もちろん、動画を見て欲しいのに動画に気づかれなくては意味がありません。
そういうときは、普通に埋め込みを使った方がいいです。

良きところでご活用いただければと思います。

リンクから動画をポップアップさせて表示する方法

テキストエディタに「動画ポップアップ」というクイックタグがあります。

テキストエディタの[動画ポップアップ]のクイックタグをクリックします

テキストエディタの[動画ポップアップ]のクイックタグをクリックします

クリックすると以下のようなコードが表示されるので、
動画のリンクを置き換えてください。

<a href="動画埋め込みリンク" data-lity="data-lity">テキスト</a>

YouTubeであれば、動画右下の共有ボタンから表示される短縮URLでOKです。

YouTube動画リンクをコピーします

YouTube動画リンクをコピーします

画像リンクも可

画像をリンクで囲めば画像からの動画ポップアップも可能です。

<a href="動画埋め込みリンク" data-lity="data-lity"><img src="画像リンク"></a>

1-column-demo-page-01

movie-popup-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。