eulenbit.net

Startseite Wellenschrat Kontakt intern
Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== 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. [[doku>plugin:htmlok|htmlok]], notwendig.

Im [[doku>changes|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 [[doku>plugin:htmlok|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

<code>
<html>
EINBETTUNGSCODE
</html>
</code>

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

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

<file css 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%;
	}
</file>



<code>
<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>
</code>

<code>
<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>
</code>

==== Beispiel: Invidious-Player ====

<html>
<div class='embed-container'>
<iframe id='ivplayer' width='640' height='360' src='https://yewtu.be/embed/e1jAeIa7eyg?t=12' style='border:none;'></iframe>
</div>
</html>


==== Beispiel Youtube-Player ====

<code>
<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>
</code>

<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 ====

<code>
<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>
</code>

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