zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Width - mp4 video crop / video breiter als screen groesse

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.01.2017, 22:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2017
Beiträge: 6
jandes befindet sich auf einem aufstrebenden Ast
Frage Width - mp4 video crop / video breiter als screen groesse

Hallo, ich probiere hier schon ewig rum:

Wenn @media portrait zutrifft, soll das mp4 auf 150% hochskaliert werden, um größer im hochformat abgebildet zu werden...also um das video im hochformat eines smartphones größer zu zeigen...was aber mit sich bringt, dass ich über die breite des smartphones hinausschiesse und dann unelegant das video via touch nach rechts bewegen kann.

wie kann ich das video croppen, damit ich nicht breiter als die screenbreite werde?

ist das verständlich erklärt? etwas kompliziert
so sieht das css aus...weiter unter der @media bereich um den es geht:
Code:
.video-responsive {
padding-bottom: 56.25%;
position: relative;
max-width: 100%;
}
.canvas,
.video {
height: 100%;
width: 100%;
position: absolute;
top: -20px;
background: #fd3333;
z-index: 5;
}

#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
color: #FFF;
margin-top: 25%;
}
@media screen and (orientation: portrait) { 
.canvas,
.video {
height: 150%;
width: 150%;
margin-left: -25%;
margin-right: -25%;
position: absolute;
background: #fd3333;
z-index: 5;
}}
vielen Dank für eure bemühungen
jan
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2017, 07:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Du verwendest absolute Positionierung in Kombination mit 100% width, warum?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2017, 08:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2017
Beiträge: 6
jandes befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du verwendest absolute Positionierung in Kombination mit 100% width, warum?
Hi, danke fuer die Antwort.
Ich bin Anfänger, somit kann es sein das ich Fehler mache.

Wenn ich absolute nicht verwende, kann ich einen darauffolgenden ueberlagernden div nicht mehr richtig positionieren.

Meinst du mein Problem kann damit zusammenhaengen?
Was schlaegst du fuer eine Lösung vor?
Vielen Dank
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2017, 09:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

position:absolute ist in 99% der verwendeten Fälle nicht zu empfehlen, wird aber trotzdem gerade von Anfängern gerne verwendet. Man "positioniert" nachfolgende divs auch nicht, im HTML passen sich nachfolgende Elemente den davorliegenden an.
Ein Problem von position:absolute ist zB dass es schwieriger ist, den Inhalt an Fenstergrößen etc. anzupassen. Möchtest du also nur eine statische Seite für eine bestimmte Auflösung erstellen, dann verwende es ruhig. Möchtest du jedoch unterschiedliche Größen berücksichtigen dann vergiss es und verwende es erst gar nicht.

Also kann ich dir nur sagen: Bau deine Seite so auf, dass sie komplett ohne position:absolute auskommt. Dann ist dein Problem auch gelöst.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.02.2017, 09:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2017
Beiträge: 6
jandes befindet sich auf einem aufstrebenden Ast
Standard

danke, wieder dazu gelernt..
aber:
habe gerade den code ohne position:absolute getestet... leider besteht das problem, das das video breiter ist als der screen aber nicht beschnitten wird immernoch.
hast du einen tip, wie ich das video "beschneiden" kann, so dass ich auf dem
hochkant smartphone nur noch nach unten sliden kann und nicht so unschön nach rechts, wo dann nur das 150% width video überragt, die restliche seite aber auf screenbreite zuende ist?
danke fuer deine zeit
Mit Zitat antworten
  #6 (permalink)  
Alt 01.02.2017, 10:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Ist die Breite vom Video auch wirklich korrekt auf max-width: 100% gesetzt? Gibt es eine min-width Angabe die das eventuell beeinflusst? Ist der umgebende Container eventuell größer?
Ohne konkreten HTML-Code zu dem CSS (mit dem man das Problem nachvollziehen kann) kann man hier leider nur raten.
Mit Zitat antworten
  #7 (permalink)  
Alt 01.02.2017, 12:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2017
Beiträge: 6
jandes befindet sich auf einem aufstrebenden Ast
Standard

es geht ja um den @media bereich in dem ich das video auf 150% width gestellt habe, um das video auch in der hoehe auf 150% setzen zu koennen, damit das video im hochkant smartphone einfach grosser ist.

die dadurch ueberhaengenden videofläche rechts, die das schwimmen nach rechts erzeugt, moechte ich irgendwie beschneiden.

hoffe ich druecke mich verstaendlich aus...ist nicht so leicht zu erklaeren

ich habe dir den link zu der seite geschickt
Mit Zitat antworten
  #8 (permalink)  
Alt 01.02.2017, 12:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

So etwas kann man mit overflow: hidden eventuell lösen? Wie gesagt, ohne den Code ist es recht schwer.
Auch sehe ich bei deiner Seite nicht "das video". Ich sehe bewegte Bilder und viele Sachen, aber wo jetzt "das Video" sein soll, welches Probleme macht, sehe ich nicht. Zugegeben, ich habe nicht zu lange gesucht, wenn es dir wichtig ist, dann kannst du gerne konkret beschreiben wo man genau welches Video findet.
Auch ist es sicherlich hilfreich für die anderen wenn du den Link hier postest... Oder warum möchtest du das nicht?
Mit Zitat antworten
  #9 (permalink)  
Alt 01.02.2017, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2017
Beiträge: 6
jandes befindet sich auf einem aufstrebenden Ast
Standard

Ich nutze diesen code um das hintergrundvideo (mp4) für smartphones und tablets einzubetten:
html - HTML5 video background on iPad/iphone - Stack Overflow

es handelt sich um das hintergrundvideo ganz oben auf der seite

und ich moechte erreichen, dass bei einem hochkant gehaltenen smartphone oder tablet(@media portrait) das video nicht so klein ist, wie wenn man width auf 100% hat, sondern es soll so gross sein, wie wenn man width und height auf 150% stellt. das klappt auch, mit dem unschoenen nebeneffekt, dass man jetzt nach rechts sliden kann und die ganze seite schwimmt.
irgendwie muss ich das video beschneiden, damit man nicht nach rechts sliden kann und das video horizontal zentriert ist..weiss aber nicht wie.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.02.2017, 13:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Und wieso diese diskretionssache mit der Seite? So besonders ist diese nun auch nicht.
Nachdem ich das am PC nicht nachvollziehen kann kann ich dir nicht mehr sagen als das, was ich bereits gesagt habe. Da du nicht auf meinen Hinweis mit overflow:hidden eingegangen bist gehe ich mal davon aus dass auch das nicht zielführend war?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
max-width, mp4, width

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS Menü FuFi CSS 1 05.01.2015 15:46
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 15:43
Media Querys - Layout geht wird über den Displayrand angezeigt DarkNemesis84 CSS 9 05.05.2013 22:00
CSS von Plugin beisst! expand CSS 0 28.09.2012 17:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 18.09.2012 23:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:19 Uhr.