ウィジェット「動画」を埋め込んでもvimeoが再生されない

解決済 raffinea
(@raffinea)

5年、 5ヶ月前

助けてください。
＜やりたいこと＞
TOPページでファーストビューにvimeo動画を設置して、再生されるようにしたい
（できればページを開いたあとに自動で再生されるようにしたい）

＜環境＞
テーマ：Lightning（無料）　子テーマ使用
wordpress：5.1.1
OS: Mac

＜現在困ってること＞
ウィジェットにある「動画」をコンテンツ上部エリアに設置して、vimeo動画の埋め込みはできるのですが、
再生ボタンを押しても再生されません。
同じことをyoutubeリンクで試すと再生できたので、なにかvimeoの動画に問題があるのでしょうか。

ちなみに表示設定で「TOPページ」に指定している固定ページ内でvimeo動画を設置すると再生はされました。
ですが、、、プレビューでみると画面中央に設置できません。

上記2つの方法でvimeo設置を試みていますが、アドバイスいただけると幸いです。
もしそれ以外でうまくいく方法があればご教示願いたいです。
よろしくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全17件中)

1 2 →

DRILL LANCER
(@rickaddison7634)

5年、 5ヶ月前
vimeoや自動再生する方法はについてはわかりませんが、
私の場合下記のようにして動画を埋め込んでいます。

HTML
```
<div class="movie-wrap">
    （動画のスクリプト）
</div>
```
CSS
```
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
```
こうすることで動画がエリアの幅めいいっぱいに表示され、
なおかつレスポンシブに対応できます。
munyagu
(@munyagu)

5年、 5ヶ月前

こんにちは

Chrome では再生できないですね。
iframe に allow="autoplay" が必要なようですが、ウィジットが生成する iframe にはそれが無いことが原因のようです。
https://github.com/vimeo/player.js/issues/389

ウィジットでやりたいのなら、vimeo で埋め込みコードを取得し、カスタムHTML ウィジットに入れてはどうでしょうか？

トピック投稿者 raffinea
(@raffinea)

5年、 5ヶ月前

お二人ともありがとうございます！

@munyagu そうなんですね。。
<カスタムHTMLでもためしたんですがなぜかコードがセーブされず。。
<div style=”padding:56.25% 0 0 0;position:relative;”><iframe src=”https://player.vimeo.com/video/292531035?title=0&byline=0&portrait=0″ style=”position:absolute;top:0;left:0;width:100%;height:100%;” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src=”https://player.vimeo.com/api/player.js”></script>

vimeoから埋め込みコードをそのまま取得したんですが、これになにか問題があるんでしょうか？・・

munyagu
(@munyagu)

5年、 5ヶ月前

埋め込みコードはこのような感じになっていると思うのですが・・・

<iframe src="https://player.vimeo.com/video/XXXXXXXXX" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

スクリプトタグなどが出ているのがよく分かりません。

CG
(@du-bist-der-lenz)

5年、 5ヶ月前

コードがセーブされ無い限り、投稿できないでしょう。

CG
(@du-bist-der-lenz)

5年、 5ヶ月前

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/61297817?autoplay=1&loop=1&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
をHTMLウィジェットに記述して、コンテンツ上部エリアに設置して確認しました。
ishitaka
(@ishitaka)

5年、 5ヶ月前
保存されない件は、

WAF でブロックされたのかもしれません。ログを確認してみてください。

スクリプトタグは、

レスポンシブに必要なスクリプトです。埋め込みコードのオプションでレスポンシブを指定すると追加されます。

自動再生は、

autoplay を追加しても、Chrome などでは自動再生されない場合があります。ミュートであれば自動再生するようなので、ミュートでもいいのであれば、ifrmase の src 属性の末尾に「&muted=1&autoplay=1」を追加してみてください。
- この返信は5年、 5ヶ月前にishitakaが編集しました。
トピック投稿者 raffinea
(@raffinea)

5年、 5ヶ月前

みなさん、ご教示ありがとうございます！

@du-bist-der-lenz さんのとおなじものを貼ってみましたが、やはり保存できず（waitingがくるくる回りっぱなしの状態）、、、

@ishitaka さんのいうようにWAFが悪さしてるかもしれません。
現在自分でサーバー元へアクセスできないので、改めて対応してみたいとおもいます。

CG
(@du-bist-der-lenz)

5年、 5ヶ月前

コードがセーブされ無い限り、投稿できないでしょう。ですが、ウィジェットにスクリプトを登録することを許可したあとの危険を理解しておきましょう。
DRILL LANCER
(@rickaddison7634)

5年、 5ヶ月前
Lightningの推奨プラグインであるVK All in One Expansion Unitに付属のVK固定ページ本文ウィジェットを使用してみてはいかがでしょうか？
1. 動画を貼り付けるコードのみを書いた固定ページを作成
2. ①で作成した固定ページをVK固定ページ本文ウィジェットで呼び出す
トピック投稿者 raffinea
(@raffinea)

5年、 5ヶ月前

@rickaddison7634
アドバイスありがとうございますー！たしかにこの方法もありますね！
やってみたところ、なぜか動画の左下に「編集」というボタンがプレビューで見ても残ってしまうのですが、
これは消せる、もしくは本番公開したらユーザーからはみえなくなるんでしょうか？・・

CG
(@du-bist-der-lenz)

5年、 5ヶ月前

公開後、ログアウトして確認するのは大事なことです。

DRILL LANCER
(@rickaddison7634)

5年、 5ヶ月前

ログアウトすれば「編集」は表示されなくなるので問題ないです。
「編集」は管理者等がサイトを眺めている際に編集したくなったときに
編集しやすいように便宜上設置されたものと思われます。

トピック投稿者 raffinea
(@raffinea)

5年、 5ヶ月前

@du-bist-der-lenz @rickaddison7634
ログアウトしての確認を知りませんでした汗
アドバイスありがとうございます！

DRILL LANCER
(@rickaddison7634)

5年、 5ヶ月前

どうやら解決したようですね。
もしそうなら解決済みにしておいてくださいね。