Opgelost YouTube video op mobiel niet vierkant

[damnsharp]

Goedemorgen,
Bij een WordPress webshop (Woo) is de youtube video op mobiel niet vierkant.
Heb al e.e.a. geprobeerd met CSS code maar krijg het niet voor mekaar. Via Chrome inspect en als ik device op mobiel heb gezet ziet het er wel goed uit. Maar niet op mijn Android toestel.

Willen jullie meekijken?

Dit is de pagina naar een ring met filmpje.
En dit is de iframe code

<iframe width="373" height="373" src="https://www.youtube.com/embed/6Euzk5oPB6A" title="Ring met unieke Toermalijn Juwelier Cober #jewellery #jewelry #gems #tourmaline #handmade #ring" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Qua code heb ik dit geprobeerd:

body.single div.woocommerce-product-details__short-description iframe {
    height: 267px!important;
}

En dit:

body.single iframe {
    height: 267px!important;
}

Dank alvast!

 

[troedeboer]

Hoe lijkt het als je de volgende settings probeert:
Om de iframe een <div> zetten met css

    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;

css voor de iframe:

position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;

Je krijgt dus in kale html iets van

<div style="position: relative; overflow: hidden; width: 100%; padding-top: 100%;">
<iframe title="YouTube video player" src="https://www.youtube.com/embed/6Euzk5oPB6A?rel=0;si=Mm8ZNI-xzuKKM_cP&amp;controls=0" frameborder="0" allowfullscreen="allowfullscreen" 
style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;"></iframe>
</div>

 

[damnsharp]

Dank je wel @troedeboer . Ik zal dat gaan doen, is wel wat lastiger want moet dan bij allerlei producten dit in gaan stellen maar ja.
Fijn dat er een oplossing is!

 

[damnsharp]

Het was even blijven liggen want het bleek toch niet te werken. Weer e.e.a. geprobeerd maar op mobiel zie je boven en onder filmpje zwarte balken. En moet juist daar ook vierkant zijn.
Heb het met jouw code @troedeboer geprobeerd maar ook deze, hielp ook niet.

Nog een gouden tip?
Bedankt weer voor meedenken!

Website naar product met filmpje.

    body.single iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
    #video {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 100%;
    }
}

 

[troedeboer]

Als ik op jouw website kijk, dan lijkt het erop dat de css niet geladen wordt.
als ik de getoonde css hard bij de #video en iframe toepas, is de video vierkant, dus je zult iets in jouw pagina moeten wijzigen, waardoor de css wordt gebruikt bij jouw #video en iframe element.

 

[damnsharp]

Ik heb de code nu anders geplaatst maar zo te zien helpt het niet.
Wil je a.u.b. nog even kijken @troedeboer ? Dank je wel

 

[troedeboer]

Ik weet helaas niet hoe je de css er goed bij kan krijgen, hooguit dat het wel zou werken als deze erbij staan.
Als ik nu bij jouw pagina kijk, dan zie ik op de <div id="video"> geen css staan met bijv position relative etc:

Als ik dit handmatig invul, dus bij de <div id="video"> en bij de <iframe...> dan wordt de video vierkant:


Dus zul je toch ergens in de admin console moeten zoeken waar je dit kunt wijzigen zodat het goed bij de html elementen staat.
Succes!

 

[bron]

<div id="video">
  <iframe ....></iframe>
</div>

Bij verwijzing naar een id staat er op de pagina niet meer dan 1 <div id="video"> Klopt dit op je pagina?

 

[damnsharp]

@bron snap niet wat je bedoeld

Wat betreft CSS code, ten eerste is het natuurlijk alleen zichtbaar bij mobiel (code onder media queries gezet) en ik vergeet dat de site achter Cloudflare zit dus ga het cache legen want CSS code staat mijns inziens goed.

Ik kom erop terug.

 

[bron]

Het gaat om de html. Een id-naam moet in de html van een pagina uniek zijn, dus op elk moment dat je onder water de html van een pagina bekijkt mag een id="......" niet meerdere keren voorkomen. Dit heeft verder niets te maken met een mobiel, de vormgeving of media queries. In de css mag je een #id uiteraard zo vaak gebruikengebruiken als je wilt

 

[damnsharp]

Ik snap je @bron. Ja de div VIDEO komt maar 1x voor.
Het lijkt trouwens nu opgelost! Ik moet het nog wat beter testen met andere producten maar alvast even een tussen bericht hier