{"id":2245,"date":"2022-01-30T14:16:04","date_gmt":"2022-01-30T13:16:04","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2245"},"modified":"2022-01-30T14:42:59","modified_gmt":"2022-01-30T13:42:59","slug":"video-als-hintergrund-fuer-webseite","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2245\/video-als-hintergrund-fuer-webseite\/","title":{"rendered":"Video als Hintergrund f\u00fcr Webseite"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/2245\/video-als-hintergrund-fuer-webseite\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/2245\/video-als-hintergrund-fuer-webseite\/#Video_einbinden\" >Video einbinden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/2245\/video-als-hintergrund-fuer-webseite\/#CSS-Code\" >CSS-Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/2245\/video-als-hintergrund-fuer-webseite\/#Online-Beispiel\" >Online-Beispiel<\/a><\/li><\/ul><\/nav><\/div>\n<p>Ein Video als Hintergrund f\u00fcr eine Webseite.<\/p>\n<p><!--more--><\/p>\n<p>In diesem Blogartikel wollen wir uns mal anschauen, wie wir ein Video als Webseitenhintergrund verwenden k\u00f6nnen. Als Vorbereitung brauchen wir nat\u00fcrlich ein Video. Dieses sollte idealerweise nicht zu gro\u00df sein, nicht nur wegen der Ladezeiten, sondern auch, weil viele Nutzer mit mobilem Internet ansonsten ihr kostbares Datenvolumen sinnlos verballern.<\/p>\n<p>Als Webseite nehmen wir in unserem Beispiel ein Formular:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/01\/video_1.jpg\" alt=\"\" width=\"600\" height=\"461\" class=\"alignnone size-full wp-image-2246\" srcset=\"\/wp-content\/uploads\/2022\/01\/video_1.jpg 600w, \/wp-content\/uploads\/2022\/01\/video_1-300x231.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/9JudBI-6cdQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Video_einbinden\"><\/span>Video einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zuerst binden wir unsere Video-Datei ein. Hierzu verwenden wir den Video-Tag. Der Code kommt direkt nach dem Body-Tag.<\/p>\n<pre>&lt;video autoplay muted loop id=&quot;bgVideo&quot;&gt;\r\n    &lt;source src=&quot;background.mp4&quot; type=&quot;video\/mp4&quot;&gt;\r\n&lt;\/video&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/01\/video_2.png\" alt=\"\" width=\"473\" height=\"137\" class=\"alignnone size-full wp-image-2247\" srcset=\"\/wp-content\/uploads\/2022\/01\/video_2.png 473w, \/wp-content\/uploads\/2022\/01\/video_2-300x87.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/p>\n<p>Dem Video haben wir eine ID zugewiesen, auf welche wir im CSS-Code verweisen werden. Anschlie\u00dfend m\u00fcssen wir noch ein DIV-Element um den restlichen Inhalt unserer Webseite einf\u00fcgen.<\/p>\n<pre>&lt;div class=&quot;content&quot;&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/01\/video_3.png\" alt=\"\" width=\"503\" height=\"235\" class=\"alignnone size-full wp-image-2248\" srcset=\"\/wp-content\/uploads\/2022\/01\/video_3.png 503w, \/wp-content\/uploads\/2022\/01\/video_3-300x140.png 300w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS-Code\"><\/span>CSS-Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nun brauchen wir noch etwas CSS f\u00fcr unser Video und unser Inhalt:<\/p>\n<pre>#bgVideo {\r\n    position: fixed;\r\n    right: 0;\r\n    bottom: 0;\r\n    min-width: 100%;\r\n    min-height: 100%;\r\n}\r\n\r\n.content {\r\n    position: fixed;\r\n    bottom: 0;\r\n    width: 100%;\r\n    padding: 10px;\r\n}<\/pre>\n<p>Dieser legt z.B. fest, dass unser Video die gesamte H\u00f6he und Breite verwendet, gleiches gilt f\u00fcr unseren Inhalt. Au\u00dferdem legen wir etwas Padding fest. Dies kann man noch anpassen, damit es besser zum eigenen Inhalt passt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Online-Beispiel\"><\/span>Online-Beispiel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ekiwi.de\/wp-custom\/video_hintergrund\/\" target=\"_blank\" rel=\"noopener\">Online Beispiel<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Ein Video als Hintergrund f\u00fcr eine Webseite.<\/p>\n","protected":false},"author":1,"featured_media":58,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,4,108],"class_list":["post-2245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-html","tag-video"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2245"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/58"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}