Make fake elements responsive or replace them with such

[datalink]

Fake elements are an good idea for elements like anchors or input type=hidden to make them visible. They are also used for elements like flash or iframe to make them clickable and editable. This works good with static sizes, but there are issues in modern homepages with responsive, scalable webdesigns.

Example: There is a responsive video in format 16:9, it has a 100% width on every viewport.

CSS:
.responsivevideo {
    width: 100%;
}
.responsivevideo:before {
    content: "";
    display: block;
    position: absolute;
    padding-bottom: 56.25%;
}
.responsivevideo video {
    width: 100%;
    height: 100%;
}

HTML:
<div class="responsivevideo">
	<video controls="controls">
		<source src="track.mp4" type="video/mp4" />
	</video>
</div>

Everything is working fine, no problem. But what happen in CKEditor? If you open the source in CKEditor, the video tag is replaced by a fake image. But the size of the fake image is not in format 16:9, because it is another element. It has the initial size of the fake element only.

So my idea is, why not cover the real element by an transparent image insteed of replacing it? The produced source could look like this:

<div class="responsivevideo">
	<img src="transparent.gif" data-cke-element="cover-someID" style="position: absolute; width:[ video width ]px; height:[ video height ]px; left:[ video left ]px; right:[ video right ]px;" />
	<video controls="controls" data-cke-element="covered-someID">
		<source src="track.mp4" type="video/mp4" />
	</video>
</div>

Elements like video, audio, flash or iframe would be visible. They are connected by data-cke-element="cover-someID" and data-cke-element="covered-someID", position and size of the video must be read and set to the cover image.

Another use case is the never ending story of uneditable form input fields. Simply covering the fields and everybody will be happy. Elements can have styles defined in CSS, are visible and editable. Fake elements only can have styles defined by the plugin.

[Jakub Ś]

Other issues touching responsive design and editor features: #12615, #11824