So stoppen Sie die automatische Wiedergabe?

Question

Ich mache eine Webseite und ich muss ein Video darin einfügen, also habe ich eine von pakvim.com benutzt. Ich benutzte ihre Einbettungsoption und fügte den Code ein, den sie mir gegeben hatten. Das Vidoe funktioniert gut, aber ich möchte nicht, dass das Video startet, sobald die Seite geladen ist. Ich habe bereits versucht, autoplay = "false" oder autoplay = "0" zu setzen und es hat nicht funktioniert. Wie mache ich das ohne Verwendung eines Vidoe-Tags? Ich möchte das auch nur mit HTML machen.

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

Answer 1

Sie eine 3rd-Party laden gehostete HTML-Dokument in einen Rahmen.

Das HTML-Dokument lädt ein Video und konfiguriert es für Autoplay.

Sie haben keine Kontrolle über dieses HTML-Dokument (not even with JS), Sie können es also nicht daran hindern, das Video auf Autoplay zu setzen.

Answer 2

Was @Quentin sagt, ist korrekt, es sei denn, dieser Dienst verfügt über eine API, mit der Sie auf YouTube zugreifen können. Aber es gibt eine Möglichkeit, das Video weiterhin zu verwenden und es auf Ihrer Website abzuspielen, wenn der Nutzer darauf klickt.

1. Erstellen oder suchen Sie ein Bild mit den Abmessungen des Iframes (1 # 560x315).

2. Entweder laden Sie sie auf Ihrem Server oder Bild-Host, und ersetzen Sie die URL des iframe mit der URL des Bildes und geben dem iframe eine id (2 # id='vid1'.)

3. Als Nächstes erstellen Sie ein div und weisen Sie ihm eine Klasse zu (3 # class='overlay') und platzieren Sie einen <a> nchor darin.
4. der href des Ankers zuweisen mit dem Wert der URL des Videos (4 # href='http://pakvim.com/embed/nCE4UUPxO_s') und dann das target mit dem Wert von Attribut zuweisen die id der iframe (5 # target='vid1‘.)
5. Nun sind alle des wickeln Knoten in einem anderen Div. Dieses Layout wird in Verbindung mit dem bereitgestellten CSS funktionieren.
6. Aus Gründen der Kürze, listet ich hier nicht die CSS oder JS auf, aber bedenken Sie, dass eine Abweichung von CSS und/oder JS möglicherweise keinen Erfolg garantiert, es sei denn, Sie wissen, was jeder Stil macht und was die JS-Funktion wird tun - einer wird ohne den anderen nicht richtig funktionieren. Details, die hier nicht aufgeführt sind, werden im Snippet kommentiert.

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>

BEZUG

• HTML

  • Iframes & Anchors

• CSS

  • CSS Positioning

• JS

  • addEventListener & event.target