2017-01-07 8 views
1

私はウェブページを作っているので、ビデオをそれに入れる必要があるので、私はpakvim.comから使いました。私は埋め込みオプションを使用し、私が与えたコードを挿入しました。ビデオゲームはうまく動作しますが、ページが読み込まれると動画の再生を開始したくありません。私はすでにautoplay = "false"またはautoplay = "0"を入れてみましたが動作しませんでした。 vidoeタグを使用せずにこれを行うにはどうすればよいですか?私はまたhtmlだけを使ってこれをやりたい自動再生を停止する方法は?

<iframe width="560" height="315" src="http://pakvim.com/embed/nCE4UUPxO_s" frameborder="0" allowfullscreen></iframe>

+0

必要なときにビデオを起動するのが問題な場合は、あなたのビデオを起動したいときにjqueryでドキュメントのフレームをロードするのはどうですか? – Hokusai

答えて

2

あなたはフレームにHTMLドキュメントを主催サードパーティをロードしています。

HTMLドキュメントが動画を読み込んでいて、自動再生するように設定しています。

あなたはそのHTMLドキュメント(not even with JS)を制御できないため、ビデオを自動再生するように設定することはできません。

0

@クエンティンは、YouTubeのようにアクセスできるAPIがない限り、正しいと言います。しかし、あなたがビデオを持っていて、ユーザーがそれをクリックしたときにあなたのサイトでそれを再生できる方法があります。

  1. iframe(1#560x315)のサイズでイメージを作成してください。

  2. いずれかのサーバーまたは画像ホストにアップロードして、画像のURLをIFRAMEのURLを置き換えるとiframeにid与える(2#id='vid1'を。)

  3. 次に、DIVを作成し、それにクラス(3#class='overlay')を割り当て、<a> nchorをその内部に置きます。
  4. アンカーのhref動画のURL(4#href='http://pakvim.com/embed/nCE4UUPxO_s')の値を代入して、の値を持つ属性targetのiframeのidを割り当てる(5#target='vid1」。)
  5. 今のすべてを包みます別のdivのノードこのレイアウトは、提供されたCSSと連携して動作します。
  6. 簡潔にするために、私はここにCSSやJSをリストアップしていませんが、CSSやJSの逸脱は、各スタイルが何をしているのか、JSの機能誰かがいなくても正しく動作しません。ここに記載されていない詳細はスニペットにコメントされています。

SNIPPET

// Reference the div.overlay 
 
var overlay = document.querySelector('.overlay'); 
 

 
// When div.overlay is clicked... 
 
overlay.addEventListener('click', function(event) { 
 
    // Assign the clicked node to a var 
 
    var tgt = event.target; 
 
    // Set the CSS display property of tgt to 'none' 
 
    tgt.style.display = 'none'; 
 
}, false);
/* #1 */ 
 
.box, 
 
.overlay { 
 
    width: 560px; 
 
    height: 315px; 
 
    overflow: hidden; 
 
} 
 
.box { 
 
    position: relative; 
 
} 
 
/* This ruleset will place .overlay completely over the iframe */ 
 
/* #3 */ 
 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
} 
 
/* This ruleset will stretch the anchor completely over the .overlay */ 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}
<div class='box'> 
 
    <!-- #3 --> 
 
    <div class='overlay'> 
 
    <!-- #4 --><!-- #5 --> 
 
    <a href='http://pakvim.com/embed/nCE4UUPxO_s' target='vid1'></a> 
 
    </div> 
 
    <!-- #2 --> 
 
    <iframe name='vid1' width="560" height="315" src="http://imgh.us/your_logo_here.jpg" frameborder="0" allowfullscreen></iframe> 
 
</div>

REFERENCES

関連する問題