サポート » バグ報告と提案 » ウィジェット「動画」を埋め込んでもvimeoが再生されない

  • 解決済 raffinea

    (@raffinea)


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

    <環境>
    テーマ:Lightning(無料) 子テーマ使用
    wordpress:5.1.1
    OS: Mac

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

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

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

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

    (@rickaddison7634)

    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%;
    }
    

    こうすることで動画がエリアの幅めいいっぱいに表示され、
    なおかつレスポンシブに対応できます。

    こんにちは

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

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

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

    @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&#8243; 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&gt;

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

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

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

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

    CG

    (@du-bist-der-lenz)

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

    CG

    (@du-bist-der-lenz)

    <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ウィジェットに記述して、コンテンツ上部エリアに設置して確認しました。

    保存されない件は、

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

    スクリプトタグは、

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

    自動再生は、

    autoplay を追加しても、Chrome などでは自動再生されない場合があります。ミュートであれば自動再生するようなので、ミュートでもいいのであれば、ifrmase の src 属性の末尾に「&muted=1&autoplay=1」を追加してみてください。

    • この返信は7ヶ月、 3週前にishitakaが編集しました。

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

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

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

    CG

    (@du-bist-der-lenz)

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

    RICK

    (@rickaddison7634)

    Lightningの推奨プラグインであるVK All in One Expansion Unitに付属のVK固定ページ本文ウィジェットを使用してみてはいかがでしょうか?

    1. 動画を貼り付けるコードのみを書いた固定ページを作成
    2. ①で作成した固定ページをVK固定ページ本文ウィジェットで呼び出す

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

    CG

    (@du-bist-der-lenz)

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

    RICK

    (@rickaddison7634)

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

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

    RICK

    (@rickaddison7634)

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

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • トピック「ウィジェット「動画」を埋め込んでもvimeoが再生されない」には新たに返信することはできません。