Dokuwiki

iFrame responsive einbinden

Damit überhaupt HHML-Code ausgeführt werden kann, ist seit Dokuwiki-Version 2023-04-04 „Jack Jackrum“ für die Einbettung von HTML ein Plugin, z.B. htmlok, notwendig.

Im Changelog von 2023-04-04 „Jack Jackrum“ ist zu lesen:

The options to embed HTML and PHP have been removed

Ein Plugin mit dem Namen htmlok löst das Problem für HTML-Einbettungen aber wieder und erwähnt noch folgendes:

This plugin allows the use of HTML in releases after Igor. The HTML support has been removed for security reasons. Under this aspect, this plugin should also be considered critically!

Die Einbettung wird eingeleitet mit

<html>
EINBETTUNGSCODE
</html>

<html>
<iframe id='ivplayer' width='640' height='360' src='https://yewtu.be/embed/_sbr2iduTyQ' style='border:none;'></iframe>
</html>

Möchte man Responsivität erhalten, ist zunächst ein Custom-CSS zu erstellen und in der Datei conf/userstyle.css zu speichern.

userstyle.css

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

<html>
<div class='embed-container'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/e1jAeIa7eyg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</html>

<HTML>
<div class='embed-container'>
<iframe title='Konservendose (Erbseneintopf) mit einem Victorinox-Taschenmesser öffnen' width='560' height='315' src='https://gegenstimme.tv/videos/embed/77bf42a7-3321-44df-a3ce-b3318e3a067f' frameborder='0' allowfullscreen='' sandbox='allow-same-origin allow-scripts allow-popups'></iframe></div>
</HTML>

Beispiel: Invidious-Player

Beispiel Youtube-Player

<html>
<div class='embed-container'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/e1jAeIa7eyg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</html>

Beispiel Peertube-Player

<html>
<div class='embed-container'>
<iframe title="Pfulsk - So fing alles an" width="560" height="315" src="https://gegenstimme.tv/videos/embed/946abfed-650b-4a4c-9d6c-f52483ba73b8" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
</div>
</html>