もう一度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&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のは、私は読むことができていたものから、正しい見え、それはのように思えますすべてが適切に設定されています。しかし、何も動作していません。そこにいるすべてのコードの天才は、問題を参照してください?
更新:コードは必要ありませんが、これは大変です!下記の回答を参照し、詳細についてコメントを必ず読んでください。 – chriscreation