---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/video-local'
title: 'Local videoエレメントの追加 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:20:52+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  YouTubeやVimeoの埋め込みなしで、自分のメディアライブラリーの動画ファイルをブラウザー再生で設置できます。製品デモ、短いループ、外部プレーヤーをブロックするサイトに使います。

  ローカル動画の追加
  ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
tags:
  - 'Text and media'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:20:52+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Local videoエレメントの追加'
      description: |-
        YouTubeやVimeoの埋め込みなしで、自分のメディアライブラリーの動画ファイルをブラウザー再生で設置できます。製品デモ、短いループ、外部プレーヤーをブロックするサイトに使います。

        ローカル動画の追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:20:52+0000'
      dateModified: '2026-10-24T14:20:52+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/video-local'
      articleSection: テキストとメディア
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/video-local'
      description: |-
        YouTubeやVimeoの埋め込みなしで、自分のメディアライブラリーの動画ファイルをブラウザー再生で設置できます。製品デモ、短いループ、外部プレーヤーをブロックするサイトに使います。

        ローカル動画の追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[コンテンツを追加](/ja/hc/documentation/learn-dxpr-builder/elements) /[テキストとメディア](/ja/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Local videoエレメントの追加.

 DXPR Builderを学ぶページを作るコンテンツを追加テキストとメディア

   ## このガイドの内容

 関連ガイド

- [Styleパネルでのエレメントの見た目の変更](/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

YouTubeやVimeoの埋め込みなしで、自分のメディアライブラリーの動画ファイルをブラウザー再生で設置できます。製品デモ、短いループ、外部プレーヤーをブロックするサイトに使います。

## ローカル動画の追加

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は[最初のページ](/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。

1. カラムにカーソルを合わせ、コントロールバーの**+**をクリックします。空のページでは**Add Elements**をクリックします。**Content**タブを開き、**Local video**をクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
2. 動画ファイルは**Video**で**Select video**をクリックし、メディアブラウザーでファイルを選びます。
3. 自動再生は**Start playing automatically**で使うかを選びます。初期値はオフです。ここではオンにします。同時にクリップがミュートされます。
4. コントロール表示は**Controls**で選びます。初期値はオフです。ここでは再生、一時停止、音量のためにオンにします。
5. クリップを**Loop**するかを選びます。初期値はオフです。ここではオンにするため、クリップは繰り返します。
6. ダイアログの**Save**をクリックします。次に、コンテンツエリア上部のツールバーにある**Save**をクリックして、ページを保存します。

  ## 表示内容

クリップがカラムの幅いっぱいで再生されます。動画では、無音で自動的に始まり、ブラウザーのコントロールが表示され、終わると繰り返します。自動再生はエディターですでに動作しますが、保存したページでもう一度確認します。ページを保存して公開すると、訪問者に表示されます。

## ローカル動画の設定

エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開きます。設定項目は次のとおりです。

- **Video:** 再生するファイル。MP4、WEBM、OGG、OGV。フィールドには、サイトが受け付ける最大ファイルサイズが表示されます。Select videoをクリックして選びます。メディアブラウザーのないサイトでは、同じボタンで自分のコンピューターからファイルをアップロードします。
- **Start playing automatically:** ページ読み込み後すぐに動画を再生します。ブラウザーが音ありの自動再生をブロックするため、同時にミュートされます。
- **Muted:** 動画を無音で再生します。Start playing automaticallyがオフのときに表示されます。自動再生は常にミュートのためです。
- **Controls:** ブラウザーの再生、一時停止、音量、進行状況コントロールを表示します。
- **Loop:** 終わると動画を最初から再生します。
- **Video width:** `100%`や`800px`のようなCSS幅。初期値は`100%`です。
- **Image:** 再生開始前に表示するポスター画像。

## 表示されない場合

- **ContentタブにLocal videoがない。** ユーザープロファイルで非表示になっています。管理者に[User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)での有効化を依頼してください。
- **再読み込み後に消えている。** ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにある**Save**をクリックします。
- **プレーヤーが黒い四角で中身がない。** 動画ファイルが選択されていません。エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開き、**Video**でファイル選びます。
- **ファイルを選んだのに黒いままになっている。** ブラウザーがファイルのコーデックを再生できません。H.264のMP4に再エクスポートして選び直します。
- **動画が無音で再生される。** **Start playing automatically**は常にミュートします。ブラウザーが音ありの自動再生をブロックするためです。訪問者に音声が必要な場合は、その設定と**Muted**をオフのままにし、再生できるよう**Controls**をオンにします。

## 次のステップ

[Styleタブ](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)で動画の背後に間隔や背景を付けます。