CODEWITHSUNDEEP
jquerycssiframehtml5-video
KANAYO AUGUSTIN UG
KANAYO AUGUSTIN UG

Reputation: 2188

How to style a video iFrame?

I want to style my iFrame embedded video controls so it won't have the control style of the browser but my own styling. I have searched and couldn't get a suitable answer. Please do anyone know how I can achieve this through JavaScript or CSS or a link which can help me. I can see on some sites like YouTube that the video player is styled.

Upvotes: 1

Views: 2243

Answers (1)

Michaël van de Weerd
Michaël van de Weerd

Reputation: 788

You will need to add your CSS to the iframe by adding a link or style element to its content, just like you would do in a normal document.

Another approach that would fit your problem better is using shadow DOM. The following Javascript code illustrates how you can use this technique.

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);

The styling you define will only be applied to the HTML inside of the shadow root, thus preventing the rest of your document of being styled. JSFiddle demo.

Upvotes: 2

Related Questions