Sonntag, 30. August 2015

Flexible Youtube-Videos für Mobilgeräte

Da ich nicht lange Blogge, hab ich mal ein Streifzug durch die Bloggemeinschaft gemacht.
Einiges war wirklich beeindruckend schön designt und mit viel Liebe zum Detail.

Was mir auffiel ist, dass viele Youtube-Videos eingebettet haben.
Entweder in der Sidebar ober im Post selber.
Oft ragen diese Videoboxen aus den Elemente oder gar der Seite hinaus.

Wenn wir ein Video von Youtube einbetten bekommen wir folgendes von Youtube:
<iframe width="420" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw" frameborder="0" allowfullscreen></iframe>

Youtube gibt mir eine feste Breite und Höhe vor, die ich dann manuell verändern muss, falls sie mich nicht anspricht.

Das ist natürlich der Tod für einige mobile Geräte, da die Videos einfach diese Breite beibehalten.

Damit die Videos flexibel/responsive werden, benötige ich lediglich etwas CSS und eine etwas veränderte HTML-Eingabe.

Geht mal auf diese Seite und zieht das Browserfenster seitlich kleiner.
Ihr werdet sehen, dass das Video sich der Breite automatisch anpasst.

Ich habe folgenden Code vor Jahren von einen professionellen Designer erhalten.
Wollen wir uns hier nicht mit fremden Federn schmücken.

Zur CSS (für meine Zwecke etwas angepasst):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid silver;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
border: 0
}

Zur HTML:
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>
Wir sehen jetzt, dass die Box sich nicht um die Angaben kümmert, sondern sich der Breite anpasst.

Ich habe den iframe noch etwas hinzugefügt, dass ich unten rot hervorhebe:
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>

Das bewirkt,dass am Ende keine Videovorschläge von Youtube erscheinen.
Ich mag das nicht.
Wenn Ihr das möchtet, dann ?rel=0 einfach weglassen.

Wenn Ihr jetzt auf der ganz sicheren Seite sein wollt, würde ich noch einen div drum herum einbauen.
Damit könnt Ihr später das ganze nachtäglich noch verändern, falls Ihr Euch umentscheidet.
Wir fügen also noch eine Box ein.
Diese nennen wir beispielsweise video-box (Ihr könnt die nennen wie Ihr wollt.Von mir aus Banane)

Unsere HTML sehe dann so aus:
<div class="video-box">
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>
</div>

In unserer CSS tragen wir die box auch ein. Erstmal ohne Werte:
.video-box {}

Wofür der ganze Stress?
Beispiel:
Ihr habt das Video wie beschrieben auf volle Breite gesetzt.
Jetzt entscheidet Ihr Euch, der soll nur 300px beit sein.
Dann geht ihr einfach in die CSS und verändert den Wert:
.video-box {width:300px}

Ein Eintrag genügt um dieses Ergebnis zu erzielen:

Man kann außerdem noch eine ganze Menge Spielerein mit diesen beiden Boxen anstellen.
Effekte wie Schatten,Rahmen,Hintergründe, Ladezeichen hinter der Box und weiß der Geier was noch.
Sollte ich Zeit haben und es besteht Interesse, werde ich noch einen Beitrag dazu schreiben.
Aber vorab könnt Ihr hier ein paar Spielereien sehen.

Bis............


Nachtrag

Für die jenigen die lieber mit Javascript arbeiten möchten

Das teilte mir Oliver Doetsch mit
(einfach hier hinein kopiert):

Eine sehr schöne Lösung von +Myriam Kreatief
<script>
    (function() {
        HTMLElement.prototype.wrap = function(elms) {
            if (!elms.length) elms = [elms];
            for (var i = elms.length - 1; i >= 0; i--) {
                var child = (i > 0) ? this.cloneNode(true) : this;
                var el = elms[i];

                var parent = el.parentNode;
                var sibling = el.nextSibling;

                child.appendChild(el);

                if (sibling) {
                    parent.insertBefore(child, sibling);
                } else {
                    parent.appendChild(child);
                }
            }
        };

        var iframe = document.querySelector('iframe[src*="youtube"]'),
            css = iframe.style;

        css.width = '100%';
        css.height = '100%';
        css.position = 'absolute';
        css.top = '0';
        css.left = '0';

        var div = document.createElement('div'),
            css = div.style;

        div.wrap(iframe);

        css.position = 'relative';
        css.width = '100%';
        css.height = '0';
        css.padding = '56.25% 0 0 0';
        css.display = 'block';
    })();
</script>

Freitag, 28. August 2015

Blogger Bild-Gadget ohne Überschrift

Einigen von Euch ist sicherlich bekannt, dass man die o.e. Überschrift mit
<!-- Zwangsüberschift -->
ausblenden kann.

Wenn nicht, wisst Ihr es jetzt.

Ich stand selber vor diesem Problem und habe es anders gelöst.

Mein Weg ist der, dass man einen HTML-Leerzeichen einfügt:
&nbsp;

Somit hätten wir jetzt zwei Wege.

Was mich interessieren würde ist, ob alle mobile Geräte diese beiden Anweisungen genau so fressen wie der Heim-PC.
Wer genaueres  weißt , kann mir einfach bescheid geben.
Wäre nett.

Donnerstag, 27. August 2015

Printfrieddly - Eigene Buttons einbinden

Der unten aufgeführte Code spuckt diese Grafik aus.

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>

Nehmen wir mal an du magst einen anderen Button haben,
Zb diesen hier von der printfriendly Homepage.


Einfach von der Homepage per Rechts-Klick die URL kopieren

Das wäre
http://cdn.printfriendly.com/pf-button.gif

Nun lediglich die URL tauschen mit der unten rot gefärbten URL

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>

Wie erhalten
Print Friendly and PDF

 
Was auch geht ist eine eigene Grafik einbauen.
Habe auf die schnelle eins bei Picasa hochgeladen.
URL dann ausgetauscht und schon habe ich einen eigenen Button.
Ok. Zugegeben es geht schöner, aber egal :)

Und fertig wäre die Laube :)

Naja, nicht ganz, weil der mir da nicht gefällt.
Ich hätte ihn gerne woanders


Die Zeile die ich jetzt suche:
<div class='post-share-buttons goog-inline-block'>
Und genau wie oben den Code dahinter/darunter setzen.

Somit bin ich nicht mehr so eingeschränkt und kann nach Belieben meine Buttons selbst bestimmen.
Mal schauen wann Printfriendly das unterbindet.

Hoffe es hat geholfen.
Da keiner hier ein Kommentar schreibt, weiß ich es ja nie.

Ja, hat mich denn gar keiner lieb :-(   ?

Printfrieddly - Button einbinden

Aus aktuellem Anlass, weil jemand im Forum und einer privat sagten, es würde nicht klappen mit dem Einbinden, habe ich das hier getippt.

Ich muß gestehen ich kannte diesen Dienst gar nicht, aber eigentlich ganz einfach das ganze.
Würde sich da nicht ein Parsing-Fehler einschleichen.
Wer was dazu lesen möchte siehe PS ganz unten.

Im Code unten ist der Übeltäter behoben, so daß es jetzt klappen müßte.

Ich habe diesen Button ausgesucht um einzubinden.

Der soll unter jeden Post erscheinen.

Das ist der Code der dafür verwendet wird:

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>


Wir kopieren also den Script und schalten in HTML-Modus.
Dafür gehen wir zur Hauptbedienungsfläche.
Also hier drüber:
Vorlage>>HTML bearbeiten

Die Zeile die wir benötigen lautet:
<div class='post-footer'>


Und genau hier drunter wird unser Code eingefügt.


Und schon steht der Button dort, wo wir ihn haben wollten.
Das könnt Ihr auf meinem Blog sehen.
Allerdings habe ich da einen anderen Button.

Ein Schönheitsfehler hat das ganze jedoch.
Solltet man von einer Seite, auf der sich mehrere Posts befinden, einen einzelnen Post drucken wollen, so wird trotzdem die ganze Seite gedruckt.
Wenn der Post alleine aufgerufen wird, dann ist das machbar.

Unter Umständen ist es ratsamer eine PDF zu basteln und diese direkt einzubinden um vom PDF-Reader öffnen zu lassen.
Das muß aber jeder für sich entscheiden.

Wenn Du wissen willst wie man andere Buttons, sogar eigene Button-Grafiken einbinden kann, dann schau mal hier vorbei

Enjoy!




PS
Die Meldung Parser-Fehler-Meldung kommt daher, dass wir hier eine XML-Datei haben.
Diese erwartet bestimmte Anweisungen.
In dem Fall ist es das abschließende img-tag, das Ärger macht.
Genauer gesagt fehlt da ein  /

bei
<img src="irgendwas">
fängt der an zu bocken

schreiben wir
<img src="irgendwas" />
frisst der das

Ist doch ein Sack, oder?

Dienstag, 25. August 2015

Facebook-Videos einbetten

Hey Toivi !

Du wolltest dieses Video in deinem Blog einbauen, klappte aber nicht.
An sich ist das Einbetten leicht gemacht.

Gehe auf die Seite und klicke auf  ``Video einbetten´´, so wie unten sichtbar.

Daraufhin öffnet sich ein Fenster und Du kannst den Code kopieren

Anschließend gehst Du über HTML und gibst den Code ein.
Und das Ergebnis sieht dann so aus


The UN's unhealthy obsession with Israel explained in one short video. Note: at time of production 40% of the UN Human Rights Council resolutions were against Israel. Now, we are at well over 50%. Your voice matters! Join us! worldjewishcongress.org/en/HumanRights
Posted by World Jewish Congress on Donnerstag, 25. Juni 2015


Das wäre eigentlich alles.
Hoffe ich konnte dir helfen.
Falls was ist, einfach melden.

Sonntag, 23. August 2015

100% Hintergrundbild in Blog einbauen

Oder: Fullscreen Hintergrund Bild.

Für alle die, die bereits Erfahrung haben, sind die ersten Schritte nicht notwendig, sogar nervig.
Für Anfänger jedoch schon wichtig. Daher führe ich sie auf.

Ich habe (um Urheberrechte nicht zu verletzen) einfach ein Foto geschossen.
So sieht es aus, wenn man bei mir aus dem Fenster glotzt.
Kein schönes Bild, aber für ein Beispiel sollte es reichen.
Ich werde also folgendes Bild als Hintergrund verwenden.
Meine Maße sind 1920x1080 Pixel.
(Zu den Maßen siehe Vermerk ganz unten bei PS)


Da ich selber auf meinem Blog kein Hintergrundbild möchte, habe ich einen Blog angelegt um es vorzuführen.
Ich habe ein ganz simples "Einfach-Layout" gewählt, der anfangs so aussieht:


Wenn ich den normalen Weg über das Dashboard nehme
Zur  Verdeutlichung:


Über:
Vorlage>>Anpassen>>Hintergrund>>Hintergrundbild
lande ich hier


Dort wähle ch mein Hintergrundbild aus und lade es hoch.


Das Ergebnis sieht dann so aus:


Und jetzt sieht man schon, dass das ganze nicht so richtig passt.
Wenn wir kleiner zoomen sehen wir es besonders gut.


Grauenhaft. Das bild wird gekachelt/wiederholt sich.
Und genau das wollen wir ja nicht.
Deshalb müssen wir mit etwas CSS nachhelfen.
Wir müssen die bereits vorhandene CSS überschreiben und so anpassen, wie wir sie brauchen.

Dafür haben wir zwei Möglichkeiten:
1. Über unser Dashboard:
    Vorlage>>Anpassen>>Erweitert>>CSS hinzufügen
Dann würden wir hier unsere Anweisung eingeben:


oder
2. In dem wir direkt in den Code hinein gehen
    Vorlage>>HTML bearbeiten
Dann würden wir hier landen:


Ich bevorzuge die zweite Variante, weil man dann weißt wo man es hingeschrieben hat und es dann, wenn man es ggf nochmal braucht, sofort finden und verändern kann.

Diese Möglichkeit werde ich zeigen.
Die, die sich nicht an den Quellcode trauen, wählen eben die andere Variante.
Jedoch ist es relativ einfach, so dass Ihr kein Bammel haben müsst.
Ihr könnt vorher ja ein Backup eures Designs machen und wenn was schief geht einfach neu hochladen. Auf Wunsch setze ich die Tage auch darüber was online. Einfach anschreiben :)


Unsere CSS muss vereinfacht gesagt sagen, dass wir ein Bild haben wollen, welches sich in Höhe und Breite anpasst und auch so stehen bleibt.
Und da ich Euch nicht tot quatschen möchte, zeige ich jetzt die Anweisung:

html, body {
background: url(hier kommt der Pfad zum Bild) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Bleibt nur die Frage: Wie ist der Pfad zum Bild, welches wir bereits eingefügt haben?
(Gibt nämlich auch andere Möglichkeiten. Lese bitte hierzu Vermerk ganz unten bei PS)

Das schnellste und sicherste ist, in den Quellcode zu gehen und den Pfad zu suchen.
Dazu gehen wir so vor wie im bisher letztem Bild:
Vorlage>>HTML bearbeiten

Dort sehen wir an der Zeile 9 (im original.kann abweichen) einen Pfeil.
Wenn wir darauf klicken öffnet sich weiterer Code.

Was wir jetzt brauchen ist eine bestimmte Zeile.
Diese fängt so an:
<Variable name="body.background" description="Body Background"

Wir können sie suchen oder suchen lassen.
Courser ins Fenster klicken und dann Strg+F drücken.
Darauf hin öffnet sich ein Suchfenster.
Dort kopieren wir den Suchegriff hiein und drücken Enter.

Beim runterscrollen sehen wir dunkel hinterlegter text und unmittelbar darunter unser gesuchter Pfad.
Die Angabe fängt mit url an.
Mein Pfad lautet also:
http://3.bp.blogspot.com/-pABA32wwyOs/VdneiA3f_4I/AAAAAAAAAiQ/bNendzTxlCo/s0/rs-1920x1080.jpg

Dementsprechend lautet meine CSS:

/* 100% HINTERGRUNDBILD
----------------------------------------------- */
html, body {
background: #000 url(
http://3.bp.blogspot.com/-pABA32wwyOs/VdneiA3f_4I/AAAAAAAAAiQ/bNendzTxlCo/s0/rs-1920x1080.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Hinzugefügt habe ich lediglich #000, denn ich möchte beim öffnen einen schwarzen Hintergrund laden und nicht das originale orange. Wollt Ihr es nicht,dann weglassen.
Und um es wieder zu finden ein Kommentar eigefügt

Jetzt brauche ich nur meine CSS-Anweisung in den in den Quellcode hinein zu kopieren.
Wichtig ist,dass wir die bereits vorhandene Anweisung überschreiben.
Das heisst hinter der bereits vorhandenen plazieren.




Hier das Ergebnis


Und wenn wir kleiner zoomen sehen wir

Damit hätten wir unser Ziel erreicht.

Was man nocht machen könnte, wenn man es mag, ist eine transparenz einbauen, wie auf diesem Blog .
Das kann ich auf Wuscht gerne machen. Ist relativ simpel.
Schreibt mich einfach an.

Für heute verabschiede ich mich.
Hoffe es einigermaßen deutlich hin bekommen zu haben.
Was mich interessieren würde ist, ob Ihr grundsätzlich Videotutorials bevorzugt.
Wäre für Kommentare dankbar.
Von der Zeit her tut sich da nicht viel.


PS
Zur Bildgröße/Auflösung
Leider sind die Zeiten vorbei, wo es nur zwei Bildschirmauflösungen gab.
Das macht das Einbinden eines solchen Hintergrundes etwas kompliziert.
Man kann also nie sagen, welche Bildgröße die optimale ist.
Ein bißchen Schund ist also immer.
Kaum schaust du mal weg, ist schon wieder eine neue Auflösung da.
Besonders bei Mobilgeräten weißt man nie was am Ende dabei raus kommt.
Das solltet Ihr dabei bedenken.
Ich persönlich kann auf solche Sachen gerne verzichten, aber wenn man es mag, warum nicht?

Zum Bildpfad:
Ihr könnt natürlich ein Bild aus Eurer Sammlug nehmen.
Den Pfad direkt in die CSS kopieren.
Ihr müsst also nicht vorher das Bild hochladen.
Ausserdem könnt Ihr auch einen externen Link nehmen.
Beispielsweise ein Bild, welches Ihr auf einem Server habt.

Donnerstag, 20. August 2015

Wir sind on!

EINE KLEINE BEGRÜßUNG

Als ich auf einer Homepage (so wie diese) ein Hintergrundbild eigebaut habe, fragte mich ein Kumpel, ob man das genau so bei blogger.com machen könnte.
Meine Antwort; "Keine Ahnung. Blogge nicht."

Aber wie das nun mal so ist, hat die Neugier gewonnen und ich habe es mir angeschaut.
Ja,es geht. Das könnt ihr zb hier sehen.
Zoomt mal kleiner und Ihr werdet sehen, dass das Bild angepasst bleibt, während andere Inhalte kleiner bzw größer werden.

Warum also kein Tutorial machen und auch andere Blogger daran teil haben lassen?
Und genau das werde ich machen,
Dieses Wochenende werde ich das für Euch online stellen.
Ob es ein Video wird, weiß ich noch nicht. Wäre mein erstes :)
Außerdem werde ich es bei Google+ ankündigen (oder sagt man hier teilen?).
Schaut also nochmal vorbei, wenn Ihr Interesse habt.

Ferner könnt Ihr unter "HTML-Workshop" bzw "Blogindex" sehen, was wir sonst noch so vorhaben.

Ich werde versuchen es so einfach wie möglich zu halten und Euch mit Fachchinesisch verschonen.

Ich hoffe auf Resonanz, denn diese wird darüber entscheiden, wie lange dieser Blog am Leben bleibt.
Fühlt Euch frei mich anzuschreiben.
Bitte etwas Geduld bei der Beantwortung, denn wir machen das hier nur als Fun und leben nicht online.

Wir haben unsere Seite mit viel Liebe gestaltet, stecken jedoch noch in den Kinderschuhen.

Abschließend muss ich gestehen, dass ich Blogger bis jetzt immer belächelt habe.
Aber irgendwie habe ich Gefallen daran gefunden.