Das etwas abgeschnitten wird ist nicht so schlimm. Mir geht es nur darum, dass das Video auf die volle Bildschirmbreite geht, aber trotzdem eine höhe von 700px hat.
Leider habe ich von JavaScript gar keine Ahnung, kennt Ihr ein Tutorial womit ich arbeiten könnte oder könnt Ihr mir da im besten Fall aushelfen?
Also ich habe mal beim suchen einen Beitrag gefunden wo gezeigt wurde, dass es genau so funktioniert wie bei einem Bild welches man mit object-fit anpasst ohne dass es sich verzerrt.
Aber in dem Beitrag wurde nicht mit einem eingebetteten Video gearbeitet, ich kann euch gerne hier einen Link hier reintun wo ich es gesehen habe.
Meine src habe ich nach einem Tutorial angepasst, da ich es damals in Vollbild-Format gebraucht habe. Aber wenn ich es wieder von YouTube kopieren würde, würde der iframe-code genauso aussehen wie bei dir.
Ich weiß dann jetzt nicht welche Eigenschaften ist anhängen muss, kenne mich leider nicht so sehr damit aus.
Hat leider nicht viel gebracht, das Video ist zwar jetzt auf der höhe, aber immer noch nicht auf der vollen Bildschirmbreite. Das Format des Videos bleibt weiterhin bei 16:9
Ich schicke mal noch den html- und den css-code hier rein, vielleicht hilft das weiter.
<div class="video-background">
<div class="video-foreground">
<iframe class="objectfit" src="https://www.youtube.com/embed/sHXdKJ5SjaY?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&playlist=sHXdKJ5SjaY" frameborder="0"></iframe>
</div>
</div>.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#vidtop-content {
top: 0;
color: #fff;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}Ich hätte vielleicht noch erwähnen sollen, dass das Video auf die volle breite des Bildschirms gehen und auch so bleiben soll. Leider bleibt dieser nicht so wenn die die height auf 700px ändere.
Hey Leute,
ich würde gerne ein Video aus YouTube auf eine Seite einbetten und den Ausschnitt so gestalten, dass das Video in die volle breite geht, aber nur eine höhe von 700px hat, welches dazu noch automatisch abläuft und im loop läuft. Dazu habe ich mir schon etliche Tutorials durchgelesen und angeschaut, aber leider haben die alle entweder nur gezeigt wie man ein Video einbettet oder sie haben Videos aus deren src verwendet. Das ist bei mir leider nicht möglich, da dass Video 1 Minute lang ist und so zu groß ist um diesen als src Datei in die Website einzubinden.
Danke schon mal im voraus! 
Eben ist bei mir eine Test-Mail angekommen, auch als ich es eben ausprobiert habe. Ich denke dadurch dass ich den
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>entfernt habe funktioniert das Formular jetzt.
Besten Dank für die Hilfe!
Ja, das versenden hat davor funktioniert.
Hier der Code mit Zeilenumbrüchen
<?php
/*
* CONFIGURE EVERYTHING HERE
*/
// an email address that will be in the From field of the email.
$from = 'Kontaktform KdB <contactform@kulturderbewegung.de>';
// an email address that will receive the email with the output of the form
$sendTo = 'KDB Kontakt <office@conweimar.de>';
// subject of the email
$subject = 'KdB Kontaktformular';
// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Betreff', 'message' => 'Nachricht');
// message that will be displayed when everything is OK :)
$okMessage = 'Wir haben deine Anfrage erhalten! Wir melden uns schnellstmöglich bei dir.';
// If something goes wrong, we will display this message.
$errorMessage = 'Es ist ein Fehler aufgetreten 🤯. Bitte später erneut versuchen';
/*
* LET'S DO THE SENDING
*/
// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
$emailText = "Neue Kontaktanfrage\n=============================\n";
foreach ($_POST as $key => $value) {
// If the field exists in the $fields array, include it in the email
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
// All the neccessary headers for the email.
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}Und noch den JS Code also PHP-Contact-Form-dark.js, den PHP-Contact-Form-dark-1.js kann ich hier leider nicht einfügen da dieser die Begrenzung von 10.000 Zeichen überschreitet.
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "assets/php/contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});Also ich habe die Reihenfolge geändert und noch einen cdn-Link eingefügt
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="assets/js/parallax.min.js"></script>
<script src="assets/js/cookies.js"></script>
<!--<script src="assets/js/popup.js"></script>-->
<script src="assets/js/navbar.js"></script>
<script src="assets/js/PHP-Contact-Form-dark.js"></script>
<script src="assets/js/PHP-Contact-Form-dark-1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>den /jquery-validate (Zeile 6) habe ich eingefügt. Das soll eine alternative sein wenn ich nicht den entsprechenden Link finde. Also jetzt ist es so dass sich das Kontaktformular zwar leer wenn man auf senden klickt, aber die Nachricht kommt bei mir immer noch nicht an.
Hey,
ich merke erst jetzt das die Zeilenumbrüche fehlen weil ich größere Code-Dateien minimiert habe um es für die Online-Version benutzen, damit die Datei-Größe der Webseite an sich nicht so groß ist. Ich habe aber noch die nicht minimierte Version um die Webseite bearbeiten zu können.
Danke für die Antwort! Ich wusste gar nicht dass man eine bestimmte Reihenfolge einhalten muss und es auch deswegen nicht funktionieren kann, ich probiers mal aus.
Hey,
ich probiere es mal aus mit dem Affenformular.
Wieso die Zeilenumbrüche fehlen versteh ich selber nicht, die Codes habe ich direkt aus dem Visual Studio Code kopiert und hier eingefügt.
Ja das ist die Webseite an der ich arbeite.
Also ich habe den action="assets/php/contact.php" Code entfernt. Die zweite Seite öffnet sich nicht mehr, aber dafür bekommt man gar keine Benachrichtigung ob es überhaupt abgeschickt wurde und die Nachricht kommt bei mir jetzt leider nicht mehr an.
Hey,
danke für die Antwort, ich teste es mal aus.
Tut mir Leid, wusste nicht dass es Code Tags gibt. Da achte ich auf jeden Fall beim nächsten Mal drauf!
Hey Leute,
folgendes Problem: Nachdem man das Kontaktfeld ausfüllt und auf senden klickt, wird die Benachrichtigung dass die Nachricht abgeschickt wurde, auf einer extra Seite geöffnet. Was ich nicht verstehe da ich das Kontakt-Formular und die php und js Dateien aus einer anderen Webseite (welches ein bekannter von mir programmiert hat, wo es auch funktioniert) kopiert habe, ich habe auch kontrolliert ob alles richtig verlinkt, im richtigen Ordner und auch auf dem richtigen Platz ist. An den Codes an sich habe ich nur die E-Mail Adresse und die Namen geändert, sonst nichts. Nach stundenlangem suchen und rum probieren finde ich leider das Problem nicht.
Hier die Codes:
html:
<form id="contact-form" action="assets/php/contact.php" method="post"> <div class="messages"></div> <div class="controls"> <div class="form-row"> <div> <div class="form-group"> <label class="d-xl-flex justify-content-xl-end" for="form_name"></label> <input class="form-control" type="text" id="form_name" data-error="Name erforderlich." name="name" required="" placeholder="Dein Name"> <div class="help-block with-errors"></div> </div> </div> </div> </div> <div class="form-row"> <div> <div class="form-group"> <label class="d-xl-flex justify-content-xl-end" for="form_email"></label> <input class="form-control" type="email" id="form_email" data-error="E-Mail erforderlich." name="email" required="" placeholder="Deine Mail"> <div class="help-block with-errors"></div> </div> </div> </div> <div class="form-row"> <div> <div class="form-group"> <label class="d-xl-flex justify-content-xl-end" for="form_phone"></label> <input class="form-control d-xl-flex justify-content-xl-start" type="text" id="form_subject" data-error="Betreff erforderlich." name="subject" required="" placeholder="Dein Thema (Betreff)"> <div class="help-block with-errors"></div> </div> </div> </div>
<div class="form-row"> <div> <div class="form-group"> <label class="d-xl-flex justify-content-xl-end" for="form_message"></label> <textarea class="form-control d-xl-flex justify-content-xl-start" type="text" id="form_message" data-error="Nachricht erforderlich." rows="8" name="message" required="" placeholder="Dein Anliegen"></textarea> <div class="help-block with-errors"></div> </div> </div> </div> <br> <div class="form-row"> <button class="btn btn-success btn-send submit" value="Senden" type="submit">senden</button> </div> </form>Der php-code:
<?php/** CONFIGURE EVERYTHING HERE */// an email address that will be in the From field of the email.$from = 'Kontaktform KdB <[email=contactform@kulturderbewegung.de]contactform@kulturderbewegung.de[/email]>'; [i](das hier ist einer der veränderten codes)[/i]// an email address that will receive the email with the output of the form$sendTo = 'KDB Kontakt <[email=office@conweimar.de]office@conweimar.de[/email]>';[i] (das hier ist einer der veränderten codes)[/i]// subject of the email$subject = 'KdB Kontaktformular'; [i](das hier ist einer der veränderten codes)[/i]// form field names and their translations.// array variable name => Text to appear in the email$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Betreff', 'message' => 'Nachricht'); // message that will be displayed when everything is OK :)$okMessage = 'Wir haben deine Anfrage erhalten! Wir melden uns schnellstmöglich bei dir.';// If something goes wrong, we will display this message.$errorMessage = 'Es ist ein Fehler aufgetreten . Bitte später erneut versuchen';/* * LET'S DO THE SENDING */// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);error_reporting(E_ALL & ~E_NOTICE);try{ if(count($_POST) == 0) throw new \Exception('Form is empty'); $emailText = "Neue Kontaktanfrage\n=============================\n"; foreach ($_POST as $key => $value) { // If the field exists in the $fields array, include it in the email if (isset($fields[$key])) { $emailText .= "$fields[$key]: $value\n"; } } // All the neccessary headers for the email. $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from, 'Reply-To: ' . $from, 'Return-Path: ' . $from,); // Send email mail($sendTo, $subject, $emailText, implode("\n", $headers)); $responseArray = array('type' => 'success', 'message' => $okMessage);}catch (\Exception $e){ $responseArray = array('type' => 'danger', 'message' => $errorMessage);}// if requested by AJAX request return JSON responseif (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encoded = json_encode($responseArray); header('Content-Type: application/json'); echo $encoded;}// else just display the messageelse { echo $responseArray['message'];}1. JS Code:
$(function () { $('#contact-form').validator(); $('#contact-form').on('submit', function (e) { if (!e.isDefaultPrevented()) { var url = "assets/php/contact.php"; $.ajax({ type: "POST", url: url, data: $(this).serialize(), success: function (data){ var messageAlert = 'alert-' + data.type; var messageText = data.message; var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>'; if (messageAlert && messageText) {$('#contact-form').find('.messages').html(alertBox); $('#contact-form')[0].reset(); }}}); return false; }})});Danke schonmal im voraus!
Hey Leute,
leider bekomme ich das Responsive immer noch nicht hin, bzw ich verstehe nicht aus welchen Gründen die ersten 2-3 Abschnitte nicht richtig angezeigt werden.
Hoffe jemand findet beim drüber schauen etwas. Danke schonmal!
Hey Leute,
in den letzten Tagen habe ich eine Webseite überarbeitet, design-technisch angepasst und habe mit dem Responsive für die Seite angefangen.
Jetzt war ich soweit, dass alles zum groben Teil steht und ich es, zum drüber schauen auf dem Smartphone, hochgeladen habe. Die Startseite funktioniert super, da passt alles. Aber wenn man dann die Seite betritt st leider vieles verschoben, die ganze Seite ist etwas zu breit (habe versucht es mit overflow-x: hidden; zu begrenzen, hat ja auch bei der Startseite funktioniert, geht aber leider trotz '!important' nicht) und ist teilweiße mega deformiert. Z.B. die Navigationsleiste tut sich, auf dem Smartphone, nicht auf die komplette Bildschirmbreite ausbreiten, während es auf dem PC-Bildschirm (arbeite immer mit 'Untersuchen' / 'Seite untersuchen' und tu die Anzeigebildschirm-Breite auf 429px') auf die komplette breite ausbreitet.
Also konkret ist mein Problem, dass das Responsive auf dem PC-Bildschirm (im Smartphoneformat) super aussieht, es aber auf dem Smartphone selber nicht so ist.
Hoffe ich habe es verständlich erklärt.
Danke schonmal im vorraus!
Hey Leute,
ich habe eine Bilder Galerie programmiert mit diesem Tutorial hier: https://bit.ly/2FcAtC2
An sich funktioniert alles super, ich bin vollkommen zufrieden damit. Mein einziges Problem gerade ist das Responsive Design davon. Wenn ich die Seite auf einem Browser mit "Untersuchen/Element untersuchen", zB im Handyformat anschaue, wird es genauso angezeigt wie im Tutorial. Also die Kästen werden schmaler, passen sich generell an den kleinen Bildschirm an. Wenn ich aber von meinem Handy (Hauwei P9 Lite) aus die Seite anschaue, werden mir die Kästen alle untereinander als schmale Rechtecke angezeigt. Auf anderen Handys (von Freunden/Kollegen alle mit neueren moderneren Handys) wird es aber auch so wie im Tutorial angezeigt. Ich gehe von aus, dass es einfach an meinem Handy liegt da es ein älteres Modell von 2016 ist.
Jetzt würde ich es gerne so haben, dass es auf allen Handys so angezeigt wird wie auf meinem. Also diese schmalen Rechtecke übereinander. Leider weiß ich garnicht wie ich da am besten Voran gehen soll, da ich die Größen der Kästen im css festgelegt und es als class im html eingefügt habe.
Danke schonmal im Voraus!
Funktioniert und passt fürs erste.
Super, vielen Dank!
Wie sehen denn deine GIFs aus, spielen die in Endlosschleife oder nur einmal?
Die werden nur einmal abgespielt und bleiben dann quasi stehen, also sollen durch ein Bild des Motivs ausgetauscht werden.
Dann hast Du das mit den Ankerpunkten, dass die GIFs anfangen zu spielen, wenn sie beim Scrollen sichtbar werden, aufgegeben?
Ja, leider. Muss ich aber wahrscheinlich jetzt wieder aufnehmen. Ich kann ja nicht den onmouseover-Code einfach ausschalten für Touchgeräte?
Ich denke die beste Lösung sind dann einfach die Ankerpunkte. Bräuchte jetzt nur noch ein paar Lösungsansätze.
