HTML verlinkung mit Bildern?

Wie verlinke ich ein Video (öffnet sich in einen neuem Fenster) durch den Klick auf ein Bild?

4 Antworten

31.10.2021, 23:30

<a href="url_zum_video" target="_blank">
  <img src="bild.webp" alt="Alternativer Text" title="Titel des Bildes" loading="lazy">
</a>

Ob das Video auch direkt abgespielt wird, hängt vom Browser des Nutzers ab.

Von Experte Gho5txx bestätigt

paaauleee

31.10.2021, 23:30

<video src="beispiel.mp4" width=320  height=240 controls poster="vorschaubild.jpg"></video>

oder

<a href="beispiel.mp4" target="_blank"><img src="irgendeinbild.png"></a>

das Target blank, sorgt dafür, dass es in nem neuen Fenster geöffnet wird

oder wenns von YT, Vimeo und Co sein soll - dann halt den embedded Code des jeweligen Anbieters verwenden

FrageCoding

Beitragsersteller

01.11.2021, 00:51

Das Zweite ist genau das was ich wollte, jetzt lädt das Video aber leider beim Klick herunter wie kann ich es abspielen lassen?

paaauleee

01.11.2021, 01:24

@FrageCoding

Das kann am Browser liegen - ansonsten das Video auf ne extra Seite als <video> einbetten und dann auf die Seite verweisen.....
Kannst hier mal testen - da hat es nach dem kleinen Umbauarbeiten (wie oben beschrieben) funktioniert https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:HTML5_video-1.html#view_result

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

31.10.2021, 23:27

Theoretisch ganz einfach per Link:

Aber: es hängt dann vom Browser des Besuchers ab wie das Video ausgegeben wird. Einfach die Video-Datei zu verlinken kann bei manchen z.B. zu einen Downloadfenster führen. Oder einer Fehlermeldung. Besser wäre wenn Du für die Ausgabe des Videos eine eigene HTML-Seite erstellst und es dort einbettest.

Woher ich das weiß:Berufserfahrung

Webclon

31.10.2021, 23:31

target="_blank" noch dann passt es 👍🏻

TechPech1984

31.10.2021, 23:31

da fehlt noch target=_blank sonst ist es kein neues fenster.

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

01.11.2021, 12:44

HTML:

<!-- index.html -->
<a href="video.html" target="_blank">
  <img src="cover.jpg" alt="video cover" />
</a>

<!-- video.html -->
<video src="video.mp4" poster="cover.jpg" controls>
</video>

Wenn das Video lediglich auf einer eigenen Seite eingebunden wird, wird es auch nicht heruntergeladen. Du erstellst also bloß einen Link zur gewünschten Seite, auf der Seite selbst bindest du dann dein Video ein.

Bei mehreren Videos auf einer Seite können auch Sprungmarken verwendet werden, damit der Besucher direkt zum gewünschten Video weitergeleitet wird.

HTML:

<!-- index.html -->
<a href="video.html#vid_1" target="_blank">Video 1</a>
<a href="video.html#vid_2" target="_blank">Video 2</a>

<!-- video.html -->
<video id="vid_1" src="video-1.mp4"></video>
<video id="vid_2" src="video-2.mp4"></video>

Mithilfe von Programmiersprachen könnte man die Ausgabe dann noch etwas eleganter steuern. Beispielsweise in dem das Video einfach abgefragt und entsprechend inkludiert wird. Beispielsweise auf einer entsprechenden video.php.

LG medmonk

Ähnliche Beiträge

HTML Download erzwingen klappt nicht?

Mein Code:

<a href="Logo1.png" download>hier</a>

Leider funktioniert das nicht, auch der Code

<a href="Logo1.png" download="Logo1.png">hier</a>

öffnet immer nur das Bild im Fenster.

Meine Quelle: html-seminar

Kann mir da jmd. weiterhelfen?

...zum Beitrag

style Datei im Header CSS?

Ist der style tag im Header der Html Datei eine Verlinkung zu der CSS Datei?

...zum Beitrag

Interaktives 3D Objekt in HTML einbinden?

Hey,

Hat jemand eine Idee wie ich eigene 3D Objekte in HTML einbinden kann? Am besten so, dass es sich z. B. dreht. Eines, dass man durch klicken und ziehen selbst rotieren kann, wäre natürlich das non-plus-ultra.

...zum Beitrag

Jimdo Widget Button nicht vorhanden?

Also hey

Ich möchte auf meiner Jimdo website Widgets/Html Codes einfügen nur bei mir öffnet sich im browser nicht ein Fenster wie überall beschrieben sondern wenn ich Inhalt hinzufügen klicke ein Seiten Fenster und da steht auch nichts von add ons oder ähnliches.

Auch mit Firefox Browser D: liegt es daran das ich ein Mac PC habe?

Bitte Hilfe danke

...zum Beitrag

Wie kann man eine Lightbox in einem iframe öffnen ohne Begrenzung des iframe?

Ich habe z.B. einen iframe mit height="400px" und width="100%". Darin befindet sich ein Element, dass per Klick eine Lightbox auf Fullscreen öffnet. Beides befindet sich auf der selben Domain/Server.

Leider öffnet die Lightbox nicht auf Fullscreen, sondern wird vom Rand des Bereiches (400px / 100%) begrenzt. Wie kann es über die Ränder hinaus gehen (fullscreen)?

PS: Das iframe möchte ich nicht auf Fullscreen einstellen, weil ich mehrere iframes untereinander haben möchte.

...zum Beitrag

HTML „Intro Bild“?

Hallo Leute,

in meiner Schule sollen wir als Langzeitprojekt eine Seite mit HTML Programmieren. Meine Frage nun: ich will dass wenn man die Seite öffnet das ein Bild kurzzeitig eingeblendet wird bei meinem Thema Flugzeug halt ein Flugzeug möglichst als gif oder Video. Also als kleiner opener für das Thema. Hat jemand eine Idee wie das geht oder hat vielleicht sogar einen Code?

Danke im voraus

LG Leon

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

DropDown-Menu Links für Handy?

wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?

Falls es hilft hier dier html-code

<!DOCTYPE html>

<head>

<title>Language Selection</title>

<style>

/* Dropdown Button */

.dropbtn {

font-size: 16px;

border: none;

}

/* The container <div> - needed to position the dropdown content */

.dropdown {

position: relative;

display: inline-block;

}

/* Dropdown Content */

.dropdown-content {

display: none;

position: absolute;

background-color: transparent;

min-width: 100px;

box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

z-index: 1;

top: 100%;

left: 50%;

transform: translateX(-50%);

margin: 8px 0;

}

/* Links inside the dropdown */

.dropdown-content a {

color: transparent;

padding: 15px 13px;

text-decoration: none;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */

}

/* Show the dropdown menu when hovering over the dropdown */

.dropdown:hover .dropdown-content {

display: block;

}

/* Keep the dropdown menu open when hovering over it */

.dropdown:hover .dropbtn {

background-color: transparent;

}

</style>

</head>

<body>

<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>

</div>

<ul>

<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>

<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>

<li><a href="#" data-nav-section="our-team">Unser Team</a></li>

<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>

<a href="#" class="dropbtn">Deutsch ∨</a>

<p><a href="italiano.html" class="italiano">Italiano</a></p>

<p><a href="english.html" class="english">English</a></p>

</div>

</li>

</ul>

</div>

</nav>

</div>

// JavaScript to handle dropdown menu clicks

document.addEventListener("DOMContentLoaded", function() {

var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");

var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");

// Function to toggle the dropdown content visibility

function toggleDropdown(index) {

if (dropdownContents[index].classList.contains("show")) {

dropdownContents[index].classList.remove("show");

} else {

dropdownContents[index].classList.add("show");

}

// Close dropdown content if clicked outside the dropdown

window.addEventListener("click", function(event) {

if (!event.target.matches('.dropbtn')) {

dropdownContents.forEach(function(content) {

content.classList.remove("show");

});

}

});

// Handle dropdown button clicks

dropdownButtons.forEach(function(button, index) {

button.addEventListener("click", function(event) {

event.stopPropagation(); // Prevent the document click event

toggleDropdown(index);

});

// Handle dropdown options clicks

var dropdownOptions = document.querySelectorAll(".dropdown-content a");

dropdownOptions.forEach(function(option) {

option.addEventListener("click", function(event) {

// Prevent default action

event.preventDefault();

// Redirect to the selected page

window.location.href = option.getAttribute("href");

});

</script>

</body>

</html>

...zum Beitrag

html video tag, controll button verschwinden?

Hallo zusammen

ich habe ein iframe, welches ein video zeigt. dieses ist mittels html video tag eingebunden.

die controll button, play, stop usw. erscheinen zwar kurz, werden aber wieder ausgeblendet. ich kann sie nicht mehr einblenden.

hat jemand eine idee an was das liegt?

der html tag

<video id="video" autoplay="" controls playsinline="" muted="" style="
"></video>

...zum Beitrag

HTML: Wie kann ich den Play-Button für mein Video unsichtbar schalten und bei Klick auf das Video die Wiedergabe pausieren / fortsetzen?

Moin meine aktiven Freunde!

Ich habe eine Frage. Und zwar möchte ich ein Video auf meiner Webseite abspielen.

Das funktioniert auch prima! Aber ich möchte, dass der Play-Button unsichtbar ist und wenn man auf das Video draufdrückt, das es sich pausiert / weiterspielt.

Geht das?

...zum Beitrag

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zum Beitrag

Navigation Größe ändern <html/CSS>?

Hallo,

ich will gerade ein Navigation bauen und habe mir mit dieser Seite geholfen.

Mein Problem ist, dass wenn ich das Fenster auf den halben Bildschirm minimiere, dass der ganzen Bereich oben abgedeckt ist, aber wenn ich es auf volle Größe mache, dann ist die Navigation klein. Siehe:

Ich hätte es mit min-width und max-width versucht.

(habe den Code kopiert - im Chrome getestet)

code

Danke im voraus.

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen