2017-01-19 22 views
0

もう一度SOのコミュニティ!私は、WordPressのサイトには、ネイティブの "Fusion Builder"ページビルダーの中ですぐに使えるモーダル要素が付属するAvadaテーマを使用しています。私はiframeコードを使用してモーダル内にYouTube動画を埋め込み、モーダルをホームページの「再生」ボタンにリンクしています。現在、 "再生"ボタンを押してポップアップ(モーダル)を開始してから、もう一度再生を押してビデオを開始する必要があります。モーダルウィンドウで開くとすぐにビデオが再生されるようにしたいので、ユーザーは2回押す必要はありません。私は、これが私が思っていたよりも難しいと思っています。私はjqueryの、唯一のHTMLとCSSの書き方を知らないhttp://8d2.b73.myftpupload.com/自動再生Youtube動画はモーダルですか? (Avada Wordpressのテーマ)

は、これは私のウェブサイトです。しかし、私は読んでjqueryにいくらか慣れています。私は現在、別のSO検索から得たこのコード(下記)を使用しています。それは動作していません。私はヘッダーにコードを挿入するためにプラグインを使用しています。ここで

var videoSrc = $("#homepage-video iframe").attr("src"); 

$('#homepage-video').on('show.bs.modal', function() { // on opening the modal 
// set the video to autostart 
$("#homepage-video iframe").attr("src", videoSrc+"&autoplay=1"); 
}); 

$("#homepage-video").on('hidden.bs.modal', function (e) { // on closing the modal 
// stop the video 
$("#homepage-video iframe").attr("src", null); 
}); 

私は技術的にショートを使用するモーダルを作成および管理するためのページビルダーを使用していますが、私のモーダルHTMLコードですので、私は本当にこのコードで何も見えたりしません。

<div class="fusion-modal modal fade modal-1 homepage-video" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="true" id="homepage-video" style="display: none;"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6"> 
     <div class="modal-header"> 
     <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="25" data-lineheight="31"></h3> 
     </div> 
     <div class="modal-body"> 
     <p><iframe src="https://www.youtube-nocookie.com/embed/BLFCOVea3yU?rel=0&amp;showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> 
     </div> 
    </div> 
    </div> 
</div> 

Avadaがネイティブにブートストラップを使用するかどうかはわかりません。テーマがどのようなものであるかわかりません。だから、ちょうどテーマは、ブートストラップを使用していないので、私のjqueryのコードが機能していない場合には、私は、ヘッダーに次のように挿入:

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

を私のjqueryのは、私は読むことができていたものから、正しい見え、それはのように思えますすべてが適切に設定されています。しかし、何も動作していません。そこにいるすべてのコードの天才は、問題を参照してください?

+0

更新:コードは必要ありませんが、これは大変です!下記の回答を参照し、詳細についてコメントを必ず読んでください。 – chriscreation

答えて

2

はAvada [融合ビルダー]からモーダルモジュールを選択します。次に、「コンテンツのモーダル」で「Fusion Builder」を選択し、オプションから「Youtube」を選択する必要があります。あなたはYoutubeからAutoplay Yesオプションを選択する必要があります。

これがうまくいくと思います。

+0

Modal要素(Fusion Builder)は、「モーダルコンテンツ」のテキストボックスしかないため、HTMLやショートコードを使用しない限り、他の要素を埋め込むことはできません。前にコンテンツボックスにiframe埋め込みコードを使用していましたが、この回答を読んだ後でYouTubeのショートコードを代わりに使ってみました。 – chriscreation

+0

この同じ問題で苦労する可能性がある他の人々にとっては、まずモーダル要素を作成してから、YouTubeビデオ要素を作成する必要があります。動画の詳細を入力し、自動再生がオンになっていることを確認します。次に、ページを「デフォルトビュー」に切り替え、すべてをショートコードに変換します。 YouTube動画要素のショートコードを見つけてコピーします。 Fusion Builderに戻り、ショートコードをModal要素内の「モーダルコンテンツ」ボックスに貼り付けます。作成したYouTube動画要素は削除できます(ショートコードを取得するためにのみ使用できます)。必要に応じてCSSを使用してスタイルを設定します。 – chriscreation

0

、このいずれかを試してください:

$("iframe#divID").attr("src", $("iframe#divID").attr("src").replace("autoplay=0", "autoplay=1")); 
関連する問題