Videos responsiv einfügen

Hallo Leute,
ich möchte Videos responsiv in einem iframe einfügen, habe dafür auch einen guten Ansatz gefunden... Das Video wird immer an die Bildschirmgröße des jeweiliges Gerätes angepasst, allerdings erschlägt es einen am PC.

Das Video habe ich wie folgt eingebunden:

CSS

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

und im Beitrag

<div class="responsive-video">
<iframe src="video" frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen frameborder="0" ></iframe>
</div>

Jetzt bräuchte ich irgendwas, was die Formatierung am PC verhindert... Hat da einer 'ne Idee für mich?

Danke!

 

Schonmal vielen Dank, aber bei dieser Lösung ist die Anzeigenbreite auf dem Smartphone auch 50%...

ich suche eher eine Lösung wie z.B.
*Großer Monitor* 50%
*Kleiner Monitor* 100%

 

Super, habe das Ganze um die paar Zeilen ergänzt..

@Media only screen and (min-width: 900px) {
.responsive-video-container {
width: 50%;
}
}

genau, was ich suchte.... Vielen Dank!