XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Width - mp4 video crop / video breiter als screen groesse (http://xhtmlforum.de/showthread.php?t=73133)

jandes 31.01.2017 23:49

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

cloned 01.02.2017 08:59

Du verwendest absolute Positionierung in Kombination mit 100% width, warum?

jandes 01.02.2017 09:59

Zitat:

Zitat von cloned (Beitrag 550404)
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

cloned 01.02.2017 10:15

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.

jandes 01.02.2017 10:55

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

cloned 01.02.2017 11:04

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.

jandes 01.02.2017 13:05

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

cloned 01.02.2017 13:37

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?

jandes 01.02.2017 14:07

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.

cloned 01.02.2017 14:50

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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023