{"id":5864,"date":"2022-02-10T08:10:06","date_gmt":"2022-02-10T08:10:06","guid":{"rendered":"https:\/\/outstandingthemes.com\/wie-man-ein-video-in-html-zentriert\/"},"modified":"2024-11-21T14:16:32","modified_gmt":"2024-11-21T14:16:32","slug":"wie-man-ein-video-in-html-zentriert","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/","title":{"rendered":"Wie man ein Video in HTML zentriert"},"content":{"rendered":"\n<p>Das Einf\u00fcgen eines Videos in eine <a href=\"https:\/\/www.tv-pakkepriser.dk\/\">HTML-Webseite<\/a> kann f\u00fcr Ihre Besucher von gro\u00dfem Nutzen sein. Wenn Sie an einem leidenschaftlichen Projekt arbeiten, kann es dem Endprodukt auch eine visuelle Identit\u00e4t verleihen. Diejenigen, die an einem bestimmten Projekt oder einer Marke arbeiten, haben au\u00dferdem die M\u00f6glichkeit, sich durch das Video vorzustellen.    <\/p>\n\n<p>Wenn Sie ein Video in ein HTML-Dokument einf\u00fcgen, gibt es drei g\u00e4ngige Methoden, die Sie verwenden k\u00f6nnen. Die Antworten auf die Frage, wie man ein Video in HTML zentriert, lauten: <\/p>\n\n<ul><li>Einf\u00fcgen eines <center> HTML-Tags in das Dokument<\/center><\/li><li>Eingabe eines <div> Containers, um ein Videoelement in den Stil text-align:center einzubinden<\/div><\/li><li>Einf\u00fcgen eines Randes mit auto 0px und dem Stil display:block in das Video<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">Zentrieren eines Videos mit dem Tag <center> <\/center><\/h2>\n\n<p>Dies ist eine der einfachsten Methoden, wenn es darum geht, ein Video in ein HTML-Dokument einzuf\u00fcgen. Der <center> Tag wird schon seit langem verwendet und ist eine der bequemsten Methoden, um ein Video in der Mitte einer Seite zu platzieren. <\/center><\/p>\n\n<p>Wenn Sie diesen Weg gehen m\u00f6chten, k\u00f6nnen Sie einen HTML <video> Tag innerhalb des <center> Tags einf\u00fcgen, um ein Video in der Mitte der Seite anzuzeigen. Die Tags lauten wie folgt: <\/center><\/video><\/p>\n\n<p><center><\/center><\/p>\n\n<p><video controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Der <center> Tag wirkt heute ein wenig veraltet. CSS ist inzwischen das am h\u00e4ufigsten verwendete Werkzeug zur Steuerung der Darstellung von Inhalten. Dennoch wird der <center> Tag noch von allen modernen Internetbrowsern unterst\u00fctzt. Sie m\u00fcssen nicht bef\u00fcrchten, dass es in absehbarer Zeit verschwindet, auch wenn es eines Tages als veraltetes Feature betrachtet werden k\u00f6nnte.   <\/center><\/center><\/p>\n\n<h2 class=\"wp-block-heading\">Zentrieren eines Videos mit dem Tag <div>, sowie text-align:center<\/div><\/h2>\n\n<p>Der <center> Tag ist keine \u00fcbliche Konvention f\u00fcr die meisten HTML-Dokumente. Heutzutage k\u00f6nnen Sie sich auch Ihre eigene Version des Tags ausdenken. Eine M\u00f6glichkeit dazu ist die Eingabe eines <div> Tags mit einem text-align:center daneben.  <\/div><\/center><\/p>\n\n<p>Wenn Sie auf der gesamten Webseite <div> verwenden m\u00f6chten, k\u00f6nnen Sie einen Stil f\u00fcr die Klasse .center einf\u00fcgen. Das sieht dann so aus:<\/div><\/p>\n\n<p>div.center {<\/p>\n\n<p>text-align: center;<\/p>\n\n<p>}<\/p>\n\n<p>Sie k\u00f6nnen dann den Tag <video> mit <div class=\"center\"> umschlie\u00dfen:<\/div><\/video><\/p>\n\n<p><div class=\"center\"><\/div><\/p>\n\n<p><video controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Das Video wird dann genau in der Mitte des Elements <div> platziert.<\/div><\/p>\n\n<h2 class=\"wp-block-heading\">Zentrieren des Videos mithilfe eines Randes und eines Anzeigestils<\/h2>\n\n<p>Sie k\u00f6nnen w\u00e4hlen, ob Sie dem <video> Tag einen Wrapper hinzuf\u00fcgen m\u00f6chten. Obwohl die anderen Methoden einen solchen enthalten, ist er keine Voraussetzung f\u00fcr die Zentrierung Ihres Videos. Sie k\u00f6nnen sogar einen Stil direkt auf dem <video> Tag verwenden.  <\/video><\/video><\/p>\n\n<p>Der Stil sieht folgenderma\u00dfen aus:<\/p>\n\n<p>video.center {<\/p>\n\n<p>Anzeige: Block;<\/p>\n\n<p>margin-left: auto;<\/p>\n\n<p>margin-right: auto;<\/p>\n\n<p>}<\/p>\n\n<p>Der Stil display:block ist erforderlich. Das Element <video> verwendet display:inline, so dass ein Verzicht darauf zu Problemen f\u00fchren w\u00fcrde. <\/video><\/p>\n\n<p>Wenn Sie das Tag <video> durch ein Blockelement ersetzen, funktioniert der Rand nicht wie vorgesehen. Der Grund daf\u00fcr ist, dass ein Inline-Element nur die Breite ausf\u00fcllt, die f\u00fcr die Darstellung seines Inhalts erforderlich ist. <\/video><\/p>\n\n<p>Wenn Sie die Eigenschaft display durch einen Block ersetzen, nimmt das Tag <video> stattdessen die gesamte Breite der Seite ein. Wenn Sie margin-left und margin-right auf &#8222;auto&#8220; setzen, wird der leere Platz auf der linken und rechten Seite gleichm\u00e4\u00dfig aufgeteilt. <\/video><\/p>\n\n<p>Wenn Sie die obige CSS-Anweisung verwenden, m\u00fcssen Sie nur die Klasse center in den Tag <video> einf\u00fcgen. Sie k\u00f6nnen dies jedes Mal tun, wenn Sie ein Videoelement in der Mitte platzieren m\u00f6chten. Es sieht folgenderma\u00dfen aus:  <\/video><\/p>\n\n<p><video class=\"center\" controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Zentrieren eines YouTube-Videos mit HTML<\/h2>\n\n<p>YouTube und Vimeo geh\u00f6ren zu den am meisten verbreiteten Videoanbietern. Die meisten Menschen sehen sich Inhalte von diesen Websites an. Es kann Ihrer Website sehr helfen, wenn Ihre Videos auf diesen Plattformen gehostet werden. Diese Websites verf\u00fcgen \u00fcber eine Abonnement-Funktion, mit der Sie eine Verbindung zu einem festen Publikum herstellen k\u00f6nnen.   <\/p>\n\n<p>Sie k\u00f6nnen die Webseite auch mit dem YouTube-Kanal verlinken, um die Reichweite zu erh\u00f6hen, da viele Internetnutzer die Plattform t\u00e4glich besuchen.<\/p>\n\n<p>Wenn Sie ein YouTube-Video in Ihre Webseite einbetten, werden Sie aufgefordert, ein <iframe> Tag einzuf\u00fcgen. Es wird dann repliziert und erscheint in Ihrem HTML-Text. YouTube bietet die M\u00f6glichkeit, Videos \u00fcber einen Einbettungscode \u00fcber die Funktion &#8222;Teilen&#8220; zu verbreiten.  <\/iframe><\/p>\n\n<p>Lesen Sie auch: <a href=\"https:\/\/fixthephoto.com\/video-editing-services\">Video Editing Services<\/a> von fixthephoto.com und sehen Sie sich an, welche gro\u00dfartigen Dinge sie tun k\u00f6nnen, damit Ihr Video heraussticht.<\/p>\n\n<p>Hier sehen Sie, wie der YouTube-Einbettungscode normalerweise aussieht:<\/p>\n\n<p><iframe><\/iframe><\/p>\n\n<p>width=&#8220;560&#8243;<\/p>\n\n<p>height=&#8220;315&#8243;<\/p>\n\n<p>src=&#8220;https:\/\/www.youtube.com\/embed\/<video-id>&#8222;<\/video-id><\/p>\n\n<p>title=&#8220;YouTube-Video-Player&#8220;<\/p>\n\n<p>frameborder=&#8220;0&#8243;<\/p>\n\n<p>allowfullscreen<\/p>\n\n<p>&gt;<\/p>\n\n<p>Wenn Sie das YouTube-Video zentrieren m\u00f6chten, k\u00f6nnen Sie eine der oben genannten Methoden verwenden. Vimeo verwendet in der Regel denselben Einbettungscode, bei dem nur einige Parameter ge\u00e4ndert werden, um die Website zu ber\u00fccksichtigen. M\u00f6glicherweise m\u00fcssen Sie bei anderen Videoanbietern nachfragen, ob deren Einbettungscode dem von YouTube verwendeten \u00e4hnlich ist. Die meisten Websites stellen den Einbettungscode \u00fcber ihre Freigabelinks zur Verf\u00fcgung.   <\/p>\n\n<p>Die Zentrierung eines Videos mit HTML ist eine der einfachsten Aufgaben, die Sie mit Tags, CSS oder Einbettungscodes erledigen k\u00f6nnen. Sobald Sie dies beherrschen, k\u00f6nnen Sie so viele Videos wie m\u00f6glich in die Seite einbinden. F\u00fchlen Sie sich frei, jedes Video zu zentrieren, das zu Ihrer Webseite passt!  <\/p>\n","protected":false},"excerpt":{"rendered":"Das Einf\u00fcgen eines Videos in eine HTML-Webseite kann f\u00fcr Ihre Besucher von gro\u00dfem Nutzen sein. Wenn Sie an&hellip;","protected":false},"author":7829,"featured_media":4948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[491,474,450],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man ein Video in HTML zentriert - Outstanding Themes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein Video in HTML zentriert - Outstanding Themes\" \/>\n<meta property=\"og:description\" content=\"Das Einf\u00fcgen eines Videos in eine HTML-Webseite kann f\u00fcr Ihre Besucher von gro\u00dfem Nutzen sein. Wenn Sie an&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/\" \/>\n<meta property=\"og:site_name\" content=\"Outstanding Themes\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-10T08:10:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-21T14:16:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"864\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"outstandingthemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"outstandingthemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/\",\"url\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/\",\"name\":\"Wie man ein Video in HTML zentriert - Outstanding Themes\",\"isPartOf\":{\"@id\":\"https:\/\/outstandingthemes.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"datePublished\":\"2022-02-10T08:10:06+00:00\",\"dateModified\":\"2024-11-21T14:16:32+00:00\",\"author\":{\"@id\":\"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\"},\"breadcrumb\":{\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage\",\"url\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"contentUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"width\":864,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/outstandingthemes.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie man ein Video in HTML zentriert\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/#website\",\"url\":\"https:\/\/outstandingthemes.com\/de\/\",\"name\":\"Outstanding Themes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/outstandingthemes.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\",\"name\":\"outstandingthemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"caption\":\"outstandingthemes\"},\"url\":\"https:\/\/outstandingthemes.com\/de\/author\/outstandingthemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man ein Video in HTML zentriert - Outstanding Themes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein Video in HTML zentriert - Outstanding Themes","og_description":"Das Einf\u00fcgen eines Videos in eine HTML-Webseite kann f\u00fcr Ihre Besucher von gro\u00dfem Nutzen sein. Wenn Sie an&hellip;","og_url":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/","og_site_name":"Outstanding Themes","article_published_time":"2022-02-10T08:10:06+00:00","article_modified_time":"2024-11-21T14:16:32+00:00","og_image":[{"width":864,"height":550,"url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","type":"image\/png"}],"author":"outstandingthemes","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"outstandingthemes","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/","url":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/","name":"Wie man ein Video in HTML zentriert - Outstanding Themes","isPartOf":{"@id":"https:\/\/outstandingthemes.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage"},"image":{"@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage"},"thumbnailUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","datePublished":"2022-02-10T08:10:06+00:00","dateModified":"2024-11-21T14:16:32+00:00","author":{"@id":"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a"},"breadcrumb":{"@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#primaryimage","url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","contentUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","width":864,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/outstandingthemes.com\/de\/wie-man-ein-video-in-html-zentriert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outstandingthemes.com\/de\/"},{"@type":"ListItem","position":2,"name":"Wie man ein Video in HTML zentriert"}]},{"@type":"WebSite","@id":"https:\/\/outstandingthemes.com\/de\/#website","url":"https:\/\/outstandingthemes.com\/de\/","name":"Outstanding Themes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outstandingthemes.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a","name":"outstandingthemes","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/outstandingthemes.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","caption":"outstandingthemes"},"url":"https:\/\/outstandingthemes.com\/de\/author\/outstandingthemes\/"}]}},"_links":{"self":[{"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/posts\/5864"}],"collection":[{"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/users\/7829"}],"replies":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/comments?post=5864"}],"version-history":[{"count":1,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/posts\/5864\/revisions"}],"predecessor-version":[{"id":5865,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/posts\/5864\/revisions\/5865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/media\/4948"}],"wp:attachment":[{"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/media?parent=5864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/categories?post=5864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outstandingthemes.com\/de\/wp-json\/wp\/v2\/tags?post=5864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}