【HTMLエディター】メール内に動画を埋め込みたい

【HTMLエディター】メール内に動画を埋め込みたい

メール内に動画を埋め込みたいという要望は少なからずありますが、
メールソフト側のセキュリティ上の制限や仕様によって再生できない場合も多くあるため、動画の埋め込み自体を推奨されていません。

代替方法

1.サムネイルをリンク付き画像として動画視聴ページにリンクする

こちらが一般的な方法です。
リンク付き画像を作成する方法はこちらの記事をご確認ください。

2. gif画像で代用する

3秒程度の短い動画であれば、gif画像で代々できる場合があります。

Videoタグで埋め込む

HTMLエディターではパーツが無いため埋め込めませんが、HTMLで下記のように直接記述すれば一応動画を埋め込むことが可能です。
ただし、先述の通り多くのアプリでは再生に対応していません。
また、動画ファイルはサーバー上にアップロードしておく必要があります。

  1. <p>動画</p>
  2. <video height="275" width="500" controls poster="https://example.com/example.png" src="https://example.com/example.mp4" >
  3.     <!-- fallback -->
  4.     <a href="https://exapmle.com"><img height="275" src="https://exapmple.com/example.png" width="500" /></a>
  5. </video>


    • Related Articles

    • 【HTMLエディター】テキストリンクの文字色を変更したい

      エディターを使用していると、テキストリンクの文字色や下線部の色が青くなり、変更できなくなってしまうことがあります。 この記事ではどのようにすれば回避できるのかについて解説していきます。 リンクパーツを使用している場合 上図のような「リンク」パーツを使用している場合には、下記から色を変更することができます。 要素を選択 > 上部リボンパーツの🖌(編集)アイコン > テキスト設定 > Font color テキストの一部のみをリンクにしている場合 ...

    • 【HTMLエディター】画像が縦伸びする

      HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。 HTMLエディタでの対応方法 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。 (or 数字を全て消す or 「auto」と入力する) 下図のように「Height」の部分が「auto」になっていればok。 ソース編集での対応方法 <img alt="サンプル画像" ...

    • 【HTMLエディター】画像メールを作成しようとすると余白/隙間ができるので消したい

      LPのようなメルマガを飛ばす場合、縦長の画像をいくつかに分割して挿入すると思います。 この際、端末で見てみると画像と画像の間や左右で余白が空いてしまうことがあります。 この記事では、この余白を消す方法について説明していきます。 1. padding,marginの設定を確認する 左右の余白では特に見落としがちになるのですが、画像の外側にあるカラム(table)要素に余白が入ってしまっていることが原因の可能性があります。 1-a. カラム(table)の余白 ...

    • 【HTMLエディター】スマホで見たときにテキスト・文字が小さくなる

      HTMLエディターで作成したメールの文字が、スマホで見ると小さくなってしまう場合に解決するための方法を紹介していきます。 なぜこのような事象が発生するのか？ 画像がある場合にサイズ指定がなされていない場合に元のサイズのまま画像を表示しようとすることが原因で、相対的に文字が小さくなってしまいます。 スマホのGmailアプリやOutlookメールアプリで確認した際に、比較的発生しやすい現象です。 ...

    • 【HTMLエディター】iPhoneで見ると左と上に灰色の謎の背景がある

      HTMLエディターで作成したメールをiPhoneのデフォルトメールアプリで確認したときに、下図のようにメールの左側と上の途中までが灰色になってしまう場合があります。 (現状『iPhone×デフォルトメールアプリ[青いアイコンの物]』の条件下でのみ確認していますが、この条件以外でもし見つけましたら教えて頂けますと幸いです。) この記事では、このような現象が発生した場合の対応方法について記載していきます。 原因 原稿の幅がスマホの幅を越えていることが原因です。 対応方法 1. ...