Hallo benötige Hilfe muss in meine Webseite Iframe einbinden wo der Kunde den Termin Vereinbart. Bsp: https://buchung.treatwell.de/ort/290487/menue/ Kann nur Iframe mit definirte Größe anlegen zb 400 x 800 usw. kann diese möglichkeit nicht nutzten. gib es einen Code der Automatisch die Größe in den Iframe anpasst.
Bei solchen Dingen doch einfach mal Google fragen, das immerhin normales html da kommen bei der Frage "iframe responsive" z.b. (Link nur für registrierte Nutzer sichtbar.) und 700.000 weitere Treffer. Das schneller als hier zu warten bis einer dir antwortet. oder speziell für Bootstrap was Gambio nutzt (Link nur für registrierte Nutzer sichtbar.)
Hallo Danke für die Nachricht, habe ein Skript gefunden <style type="text/css">.embed-container {position: relative; padding-bottom: 100%; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="embed-container"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://buchung.treatwell.de/ort/290487/menue/embed/simple" width="100%"></iframe><script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script></div> problem auf den Computer zeigt er super an auf Handy un Tablet kann man vergessen nicht zu gebrauchen Kann mir bitte einer behilflich sein ich habe schon mehrere probiert, kriege das nicht hin das auf verschiedenen Medien die buchung richtig angezeigt wird, danke im Voraus
Hi Daniel, mit iFrames ist es immer etwas tricky. Um iFrames auch auf mobilen Devices darzustellen, kommen wir oft nicht an mehren viewport bezogenen css versionen vorbei. Dabei ist es leider so, dass - wie in Deinem Fall - bei den mobilen Devices eine Zoom Dastellung die einzig praktikable Lösung ist da Du sonst bei einer nicht responiven iFrame Seite ohne scrollen nicht alle Daten angezeigt bekommst. Du musst also auf der html Seite erst mal folgende Zeile einbauen Code: <div id="frame_ed"><iframe id="iFrame_ed" name="iFrame" scrolling="no" src="https://buchung.treatwell.de/ort/290487/menue/"></iframe></div> Dann in der css erst mal die normale Darstellung so wie du's oben gemacht hast beschreiben (position: relative; padding-bottom: 100%; height...), dies am Anfang deiner css ohne @media... einfügen. Die DIV classen sind in diesem Beispiel #frame_ed und #iFrame_ed. Und anschließen für die mobilen Darstellungen folgende css (am besten für 3 Darstellungen 320 px, 768 px (werte dazu anpassen) und das unten angefügte Beispiel 480px). Code: @media (max-width: 480px){ #frame_ed{ width: 450px; height: 300px; } #iFrame_ed{ transform-origin: 0px 0px 0px; transform: scale(0.5); width: 900px; height: 600px; margin-top:-33.333%; } } Zum testen einfach nur den ersten Code in die html Datei oder den content Manager und nur den 2ten code in eine css. Und dann mit einer Mobilen Ansicht kleiner 480 px ansehen o.k. ist nicht ganz einfach - kann auch für Dich von uns erledigt werden. enjoi ED
Bootstrap hat das doch schon. Musst dem iFrame nur die Classic geben HTML: <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe> Da sollte normal reichen.
Hi Dennis, wir reden da nicht von Bildern oder Videos, die selbst responsiv sind oder sein können! Wir reden da von einer nicht responsiven Webseite, die mit iFrame eingebunden wird. Ich hab mal in Deinen Code das von Daniel gewünschte Ziel einkopiert. Das dürfte so auf kleinen mobilen Geräten nicht optimal sein. Code: <iframe class="embed-responsive-item" src="https://buchung.treatwell.de/ort/290487/menue/"></iframe> ED
Nein Dennis, man kann etwas was nicht responsiv ist im iFrame nicht responsiv machen. ich will Dir nur sagen, dass Dein Code genau aus diesem Grund nicht richtig ist. Dein Code funktioniert nur eben wie gesagt bei Youtube Videos usw. Hier haben wir es aber mit einer nicht responsiven Webseite zu tun. Will man eine nicht responsive webseite einbinden, wird diese abgeschnitten oder man stellt die - wie in meinem Code - mit einer zoom Funktion verkleinert dar. Dort wos Sinn macht, ist dies die einzige Möglichkeit. Das Formular von Daniel kann nur so eingebunden werden. Obs bei 320 px noch gefaellt ist eine andere Sache. Mit Deinem Code geht das leider nicht. ED
Dann machst durch den zoom ja eben doch was nicht responsives responsive. Indem du es reinquetschst. Ich dachte ja es geht nur darum den iFrame responsiv zu machen und nicht auch noch den Inhalt zu beeinflussen.