TikTokの動画を自分のブログやサイトに載せたいと思ったことはありませんか？公式の「埋め込み」機能を使えば、専門的なプログラミングの知識がなくても、数分でプレーヤーを設置できます。
お気に入りの動画を紹介したり、自分の投稿をポートフォリオとしてまとめたりする際に便利です。この記事では、PCやスマホから埋め込み用のコードを取得し、正しく表示させるための手順を解説します。
TikTok動画をサイトに埋め込む基本の手順
動画をサイトに表示させる際は、動画ファイルを直接アップロードするのではなく、TikTokのサーバーから読み込むのが基本です。これにより、自分のサイトの容量を節約しながら、高画質な映像をスムーズに流せます。操作は非常に単純で、専用のコードをコピーして貼り付けるだけで完了します。
共有メニューから埋め込みコードをコピーする
動画の右側にある矢印アイコン、つまり共有ボタンを押すと、さまざまな共有先が表示されます。その中にある「埋め込み」を選択するのが最初の手順です。
この操作を行うと、画面上にHTMLコードが現れます。「コードをコピー」というボタンをクリックすれば、すべての文字列がクリップボードに保存されます。自分でコードを書き換える必要はなく、そのままの状態で使うのが最も安全です。
HTMLエディタにコードを貼り付ける
コピーしたコードは、ブログの管理画面にある「HTML挿入」や「カスタムHTML」といった専用のブロックに貼り付けます。通常の文章を入力する画面にそのまま貼っても、ただの英数字として表示されるだけなので注意が必要です。
正しく貼り付けができると、プレビュー画面でTikTokの再生画面が出現します。一度設置してしまえば、元の動画が更新されてもサイト上のプレーヤーに反映されるため、管理の手間もかかりません。
PCブラウザで埋め込みコードを取得する3つのステップ
パソコンでTikTokを閲覧している場合は、ブラウザから直接コードを取得するのが最も効率的です。画面が広いため、操作ミスも少なくなります。以下の3つの手順に沿って、必要なコードを確実に手に入れましょう。
1. 動画右側の共有ボタンをクリック
ブラウザでTikTokを開き、目的の動画を表示させます。画面の右側に並んでいるアイコンの中から、矢印の形をした共有マークを探してクリックします。
マウスを重ねると「共有」という文字が浮き出る箇所です。ここにはSNSへのリンクなどが集まっています。コードを取得するための入り口は、常にこの矢印アイコンの中に用意されています。
2. 「埋め込み」アイコンを選択
共有メニューが展開されたら、不等号が重なったような記号（</>）が描かれた「埋め込み」という項目を選択します。これを押すと、専用のポップアップウィンドウが開きます。
ウィンドウ内には、実際の埋め込み後の見た目を確認できるプレビューも表示されます。ここで意図した動画が選ばれているかを確認してください。プレビューが正常に見えていれば、そのコードは生きています。
3. コードをコピーして保存
最後に、画面右下にある「コードをコピー」というボタンを一度だけクリックします。ボタンの色が変わったり、チェックマークが出たりすればコピー成功です。
このコードは非常に長いため、メモ帳などに一時的に保存しておくと後の作業が楽になります。一部分でも文字が欠けると動画が動かなくなるため、範囲選択ではなく必ず専用のボタンを使ってコピーしてください。
スマホアプリからブログ用のリンクを送る方法
外出中に良い動画を見つけ、スマホだけでブログ用のコードを準備したい時もあります。しかし、スマホアプリ版には直接HTMLコードを表示するメニューが備わっていません。ブラウザ版の機能を使うための、ちょっとした工夫が必要です。
共有ボタンから「リンクをコピー」
まずは通常通り、動画の右側にある共有アイコンをタップします。表示されるメニューから「リンクをコピー」を選び、動画のURLをクリップボードに保存します。
このURLは単なるリンクなので、そのままではブログに埋め込むことはできません。まずはこのURLを自分宛てのメールやチャットツールで送り、PCで開ける状態にするのが定石です。
ブラウザでURLを開きなおす
スマホのブラウザ（SafariやGoogle Chromeなど）でコピーしたURLを開き、ブラウザの設定から「デスクトップ用サイトを表示」に切り替えます。こうすることで、スマホ上でもPC版と同じ埋め込みメニューが出現します。
少し操作は細かくなりますが、この方法を使えばPCが手元にない環境でも埋め込みコードを取得できます。画面が小さくてボタンが押しにくい場合は、画面を横向きにすると操作しやすくなります。
WordPressブログにTikTokを載せる2つのやり方
WordPressを使っているユーザーであれば、さらに手順を短縮できる場合があります。動画を一行のリンクとして扱う方法と、HTMLブロックで制御する方法を使い分けましょう。テーマの仕様によって挙動が変わるため、自分のサイトに適した方を選んでください。
URLを貼り付けて自動表示させる
WordPressの最新エディタ（ブロックエディタ）を使っているなら、動画のURLを新しい行に貼り付けるだけで完了することがあります。これはoEmbedという機能によるものです。
リンクを貼った瞬間に、文字が動画プレーヤーに切り替われば成功です。ただし、プラグインの設定やテーマの古い仕様によっては、単なるリンク文字のまま残ってしまうこともあります。
カスタムHTMLブロックを利用する
自動表示がうまくいかない時は、「カスタムHTML」というブロックを追加し、そこにPC版で取得した埋め込みコードを貼り付けます。こちらの方が動作が安定しやすいため推奨されます。
特定の場所に正確に動画を配置したい時にも、この方法が向いています。コードで配置した動画は、WordPressのシステムに依存せず、TikTok側のプレーヤーが直接呼び出されるため、表示の崩れが少なくなります。
| 埋め込み方法 | 手順の多さ | 安定性 | 向いている人 |
| URLのみ貼り付け | 少ない | テーマに依存する | 手軽に更新したい人 |
| カスタムHTML | 普通 | 非常に高い | 確実に表示させたい人 |
埋め込んだ動画が表示されない理由
「手順通りにやったのに、ブログに動画が出てこない」というトラブルはよくあります。多くの場合、動画自体の設定か、サイト側の読み込み設定が影響しています。以下の2つのポイントを真っ先に確認してみましょう。
動画のプライバシー設定が制限されている
埋め込もうとしている動画が「非公開」や「友達限定」になっていないか確認してください。全体に公開されていない動画は、外部サイトへの埋め込みが拒否される仕組みになっています。
また、投稿者が「埋め込みを許可しない」という設定をオンにしている場合も、プレーヤーは表示されません。他人の動画を載せたい時は、その動画が誰でも見られる設定になっていることが大前提です。
スクリプトの読み込みがブロックされている
TikTokの埋め込みコードには、動画を動かすための「JavaScript」というプログラムが含まれています。サイトのセキュリティ設定や、ブラウザの広告ブロック機能がこれを止めていることがあります。
特にWordPressで「高速化プラグイン」を入れている場合、スクリプトの読み込み順序が変わり、動画が真っ白になるケースがあります。一度プラグインを止めてみて、動画が表示されるようになるか試してみるのが解決の近道です。
ブログに載せる際の著作権とルール
他人の動画を自分のブログに載せる際、法律的な問題が気になるかもしれません。結論から言えば、TikTokの公式機能を使った埋め込みは、正当な引用の範囲内として認められることがほとんどです。ただし、やり方を間違えるとトラブルの元になります。
公式機能を使うなら無断転載にならない
公式の埋め込みコードは、TikTokのサーバーにある動画を「窓」を通して見せている状態です。動画のデータ自体を盗んでいるわけではないため、再生回数は元動画にカウントされ、投稿者の利益にも繋がります。
利用規約でも、公式機能を通じた共有は許諾されています。投稿者名や楽曲情報も自動で表示されるため、クレジットを自分で表記する手間も省けます。
動画のダウンロードと再アップロードは厳禁
注意が必要なのは、動画を一度スマホやPCにダウンロードし、自分のブログのサーバーに直接アップロードする行為です。これは「複製」にあたり、無断転載として訴えられるリスクが高まります。
どれほど素晴らしい動画でも、自分の所有物のように扱うのはマナー違反です。必ず埋め込みコードを使い、TikTokのプラットフォームを介して紹介するように徹底してください。
サイトの表示速度を落とさないための工夫
動画を埋め込むと、その分だけページの読み込みに時間がかかるようになります。特にTikTokのスクリプトはデータ量が多く、複数の動画を貼るとサイトの表示が重くなる原因になります。読者にストレスを与えないための、ちょっとしたコツを紹介します。
1ページに載せる動画の数を絞る
解説に必要な動画は、1ページにつき3本程度に留めるのが理想的です。大量の動画を一気に見せたい場合は、記事を複数に分けることを検討してください。
読み込みが遅いと、読者は動画が再生される前にページを閉じてしまいます。情報の密度を保ちつつ、サイトの軽さを維持することが、結果として読者の満足度向上に繋がります。
ページの下部に配置して読み込みを遅らせる
記事の冒頭に動画を置くと、その読み込みが終わるまでテキストが表示されないことがあります。動画はできるだけ中盤から後半にかけて配置しましょう。
これを「遅延読み込み」と呼びます。読者が文章を読み進めている間に裏側で動画の準備が進むため、サイト全体がサクサク動いているように感じさせることができます。
埋め込み動画のサイズや位置を調整するコツ
デフォルトのコードで貼り付けると、動画が左に寄ってしまったり、画面の幅いっぱいに広がってしまったりします。自分のブログのデザインに馴染ませるために、ほんの少しだけコードに手を加えてみましょう。
センター寄せにするタグを加える
埋め込みコードの前後に、中央揃えを指示するタグを書き加えます。具体的には <center> と </center> でコードを挟む方法が最も簡単です。
デザインが整うと、記事の信頼感も増します。最近のテーマでは「ブロック設定」から中央寄せを選べるものもあるため、まずはエディタの機能を探してみるのも良いでしょう。
幅を100%に指定してレスポンシブ対応
スマホで見た時に動画の端が切れてしまう場合は、コード内にある width（幅）の指定を確認します。ここが「325px」などの固定値になっているなら、「100%」に変更してみてください。
これにより、画面の大きさに合わせて動画が自動で伸び縮みするようになります。今のブログ運営ではスマホからのアクセスが大半を占めるため、この調整は非常に価値があります。
自分の動画と他人の動画で埋め込みに違いはあるか
手順自体は自分の動画でも他人のものでも同じですが、運営上のリスクに違いがあります。自分の動画であればコントロール可能ですが、他人の動画は相手の意思に左右されるという点を忘れてはいけません。
自分の動画なら「埋め込み許可」をオンにする
自作の動画をブログで宣伝したい場合は、TikTokアプリ内のプライバシー設定を確認してください。「動画のダウンロード」や「共有」が許可されていないと、埋め込みコードが正しく機能しません。
自分の動画が多くのブログで紹介されれば、結果としてフォロワー増にも繋がります。広く拡散させたい動画であれば、この許可設定は常にオンにしておくのが賢明です。
他人の動画は削除されるリスクを考慮する
他人の動画を埋め込む場合、ある日突然、その動画が削除されたり非公開になったりすることがあります。その瞬間、あなたのブログ記事からも動画は消えてしまいます。
| 動画の所有 | メリット | 注意すべき点 |
| 自分の動画 | チャンネルの宣伝になる | 特になし |
| 他人の動画 | 質の高い情報を引用できる | 突然消える可能性がある |
「動画が消えても記事の内容が成立するように書く」のが、息の長いブログを作るコツです。 映像がないと意味が通じない記事にならないよう、テキストでの補足もしっかり行いましょう。
TikTok動画をサイトに埋め込むメリット
テキストだけの記事に比べて、動画がある記事は読者の滞在時間が長くなる傾向にあります。これは検索エンジンからの評価にも良い影響を与え、より多くの人に読まれるチャンスを広げてくれます。
記事の滞在時間を延ばす効果
読者が動画を再生している間、ブラウザはそのページを開き続けています。平均滞在時間が長くなると、検索エンジンはその記事を「有益な情報が載っている」と判断します。
動画は、最後まで読んでもらうための「フック」として非常に強力です。文字を読むのに疲れた読者も、動画であれば最後まで見てくれる確率が高まります。
視覚的なインパクトで信頼性を高める
文章で「この料理は美味しい」と書くよりも、実際に湯気が立っている動画を見せる方が説得力は格段に上がります。ハウツー記事などでは、実際の動きを見せることが何よりの証明になります。
実物を見せることで、読者の「本当にそうなの？」という疑念を払拭できます。結果として、あなたのブログ全体の信頼性が高まり、リピーターの獲得にも寄与するはずです。
まとめ：公式コードを正しく使ってブログを豊かにしよう
TikTokの動画埋め込みは、PC版の「共有」メニューからコードをコピーし、ブログのHTML挿入機能を使うだけで完了します。公式が提供する仕組みを正しく利用することで、著作権侵害のリスクを抑えながら、サイトの表現力を飛躍的に向上させることが可能です。
記事の表示速度やレスポンシブ対応といった細かな調整を行うことで、スマホユーザーにとっても優しいサイト作りができます。まずは、自分のお気に入りの動画を1本、記事の中に配置することから始めてみてください。
