ワードプレスで動画を埋め込む方法(動画幅いっぱいにする方法も)

プログラミング学習

サイト事例

オシャレなサイトって動画で始まってますよね。

例えばこことか、

COCO GARAGE|東京・千葉・埼玉の貸しガレージ
東京・千葉・埼玉・静岡の貸しガレージならCOCO GARAGE。すべてのガレージは24時間セキュリティ・電源・空調付き。さらに施設内には防犯カメラ・トイレ・コイン洗車場の充実設備。 大事な車やバイクの保管場所、 作業場、倉庫など様々な目的やニーズにお応えします。

公式ホームページがやっていることを自分自身もやりたい!

と思い調べました。

カバーを使って動画を埋め込める!

なんとすぐできます!

赤枠のカバーを使うと一瞬です。

アップロードをクリックして、入れたい動画を入れるだけ

画面サイトウィンドウいっぱいにする方法

できたものの、両端が切れていて、思うようにいきません。

この時はCSSをいじるとうまくいきました。

設定した動画を選択し、「ブロック」→「高度な設定」→「追加CSSクラス」というところに「imagefull」(名前は何でもよい)を追記します。

そうして、

外観のテーマファイルエディタへ行きます。

このあたりに下記のコードを足します。

/*画像を幅いっぱいにする*/
.imagefull {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.imagefull img{
    display: block;
    height: auto;
    width: 100%;
}

足したら、おそらく画面いっぱいになると思います。

他にも方法等あれば教えてください!

コメント