Instagram images are too big in mobile view

Um alle Funktionen dieser Webseite nutzen zu können, sollten Sie sich registrieren oder einloggen.
1. offizieller Beitrag

    Thank you for the plugin! Your time & trouble to create and maintain it, and provide it free of charge, are much appreciated.

    Images linked via an Instagram URL are not scaled in the browser when viewing on a mobile device.

    Example: https://www.instagram.com/p/BS7u1ShFGH1/

    I have tried editing the MediaProvider to use width="100%" and that works great except the height is then much too small... but it doesn't seem to understand "100%"... if I use figures instead, I can get perfect height on a phone but much too short on a desktiop, orthe pther way round, but nothing that suits both!

    Is it possible to make it so that it will scale to the exact optimum size like a standard image?

    Cheers :)

    Einmal editiert, zuletzt von darjeeling (12. Juli 2017 um 15:26)

    • Offizieller Beitrag

    Hey,

    you can do the following:

    1. Change the RegEx to
    https?://(?:.+?\.)?instagr.?am(\.com)?/p/(?<ID>[a-zA-Z0-9_-]+)/?

    2. Change the HTML-Code to
    <div class="mediaProviderInstagram_beta1"><iframe src="//instagram.com/p/{$ID}/embed/" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>

    3. Add this lines to the Style properties

    CSS
    .mediaProviderInstagram_beta1 {
	overflow: hidden;
	padding-bottom: 80%;
	position: relative;
	iframe {
		height: 100%;
		position: absolute;
		width: 100%;
	}
}

    i would overwrite the provider with the next update to the final version.

    Is this solution OK for you?

  • The_Waiters 24. November 2019 um 16:24

    Hat das Thema geschlossen.