Ich möchte meine eingebetteten iFrame-Videosteuerelemente so gestalten, dass sie nicht den Steuerungsstil des Browsers haben, sondern mein eigenes Styling. Ich habe gesucht und konnte keine passende Antwort bekommen. Bitte weiß jemand, wie ich das durch JavaScript oder CSS oder einen Link, der mir helfen kann, erreichen kann. Ich kann auf einigen Websites wie YouTube sehen, dass der Videoplayer gestylt ist.Wie style ich einen Video-iFrame?
Sie müssen Ihr CSS dem iFrame hinzufügen, indem Sie dem Inhalt ein link oder style Element hinzufügen, genau wie in einem normalen Dokument.
Ein anderer Ansatz, der besser zu Ihrem Problem passt, ist shadow DOM. Der folgende Javascript-Code veranschaulicht, wie Sie diese Technik verwenden können.
var host = document.createElement("div");
var shadow = host.createShadowRoot();
var video = document.createElement("video");
// ... set video.src, etc.
var style = document.createElement("style");
// set the styling of your video element, e.g.:
style.innerHTML = "video { border: 5px solid red; }";
shadow.appendChild(style);
shadow.appendChild(video);
// insert the host of the shadow root to the document, e.g.:
document.body.appendChild(host);
Der von Ihnen definierte Stil wird nur auf den HTML-Code im Schattenstamm angewendet, wodurch der Rest des Dokuments nicht formatiert wird. JSFiddle demo.
Ist der iFrame-Inhalt vom gleichen Server wie der Rest Ihres Inhalts oder ist er domänenübergreifend? – elmarko
Bitte fügen Sie den Code, den Sie haben, damit wir Ihnen besser helfen können. –
@elmarko ... alles von meiner Website, meinem Server –