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

movie-popup-thumbnail

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

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

先日の講習会は大変多くの方にご参加いただきありがとうございました。
講習会後は参加者の皆さんでBBQをして楽しみました。次回は来月20日に開催しますのでよろしくお願いいたします。


先日の講習会は大変多くの方にご参加いただきありがとうございました。
講習会後は参加者の方皆さんでBBQをして楽しみました。次回は来月20日に開催しますのでよろしくお願いいたします。


このようにポップアップリンクを使うことで、文に集中してもらえるということと動画のスペースを使わないで済むという利点があります。そして何よりなんかかっこいいです(笑)

もちろん、普通に埋め込みを使った方がいい場合もありますので、良きところでご活用いただければと思います。

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

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

[動画ポップアップ]のクイックタグ

[動画ポップアップ]のクイックタグ

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

<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で

コメントを残す

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