[WordPress] Responsive Youtube video

[Dograver]

Beste Tweakers.

Omdat ik een Youtubevideo op website "x" wil gebruiken plakte ik deze middels de embed en iframe tag op de website.

PHP:

<iframe width="560" height="315" src="Youtube link" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Op de full page website op de PC/Laptop prima, maar op een mobiele telefoon werd de video grotendeels buiten het scherm getoond. Via wat zoekwerk uitgekomen op een extra stukje CSS wat er voor moet zorgen dat de video dus responsive wordt.

PHP:

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

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

CSS toegevoegd, voorbeeld gevolgd en op de telefoon helemaal naar wens.

PHP:

<div class="video-container"><iframe width="560" height="315" src="Youtube link" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Echter worden op de full screen website de parameters width="560" height="315" volledig genegeerd. Hij hanteert nu een 1080x608 resolutie en staat daarmee wel heel prominent op de pagina. Er gaat in de combi van de custom CSS en de Wordpress iets niet goed alleen kom ik er niet achter wat ik verkeerd doe.
Want haal ik de div container weer weg, dan gelden mijn hoogte breedte parameters weer.

Daarom vraag ik jullie visie, wat doe ik verkeerd?

[Firedragon]

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[Dograver]

Firedragon schreef op vrijdag 8 juni 2018 @ 14:39:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Dank voor je vlotte antwoord.
Misschien moet ik wel even bij vermelden dat ik vanuit netwerk/systeembeheer een uitstapje maak voor familie naar het gedeelte van webdesign. Het is al erg lang geleden dat ik voor het laatst iets heb gedaan met PHP en CSS. Ik zie het echter wel als een uitdaging om dit niet met één of andere Wordpress media plugin op te lossen.

Zou je daarom iets meer richting kunnen geven aan boven gegeven URL?

[ Voor 20% gewijzigd door Dograver op 08-06-2018 14:52 ]

[Firedragon]

De style in je iframe word nu overruled door je css code door gebruik te maken van @media rule in je css kan je voor verschillende resoluties andere css styles schrijven.

Cascading Stylesheet:

/* Voor alles */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Voor resoluties gelijk aan of hoger dan 768px */
@media only screen and (min-width: 768px) {
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 560px;
        height: 315px;
    }
}

[DJMaze]

Je mist:

Cascading Stylesheet:

.video-container {
    max-width: 560px;
}

[ Voor 28% gewijzigd door DJMaze op 08-06-2018 15:41 ]

[Dograver]

@Firedragon dat overrulen klinkt plausibel inderdaad.
Hier ga ik vanavond even verder mee stoeien. Top

@DJMaze Ook jouw tip neem ik mee. Dankljewel

[ Voor 21% gewijzigd door Dograver op 08-06-2018 15:42 ]

[b2vjfvj75gjx7]

Je kan fitvids.js proberen [ http://fitvidsjs.com ] , of gewoon deze generator;

http://embedresponsively.com/

[Dograver]

Tot dusver ben ik een heel end gekomen met jullie tips. Wat later dan gepland door omstandigheden maar dat terzijde.
Nu is het echter zo dat de video middels jullie tips full screen komt te staan op het PC/laptop stuk, echter wil ik deze wat kleiner hebben, maar dan blijft er gigantisch gat qua witruimte.

Aantal zoektoechten verder de tag padding-bottom tegengekomen

Door met de padding-bottom te spelen heb ik de video nu eindelijk goed en wel werkend op alle platformen. EINDELIJK!!!
Dank voor jullie hulp heren, wordt zeer gewaardeerd!