Sonntag, 30. August 2015

Flexible Youtube-Videos für Mobilgeräte

Mir fiel auf, 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.

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.

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.

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.

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

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>

Der Script wird kopiert und HTML-Modus eingefügt. 
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.


Der Button steht da, 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.



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. 


Dienstag, 25. August 2015

Facebook-Videos einbetten

Ein Bekannter wollte ei Video in seinem 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

Sonntag, 23. August 2015

100% Hintergrundbild in Blog einbauen

Oder: Fullscreen Background Picture. 

Ich habe (um Urheberrechte nicht zu verletzen) einfach ein Foto geschossen.
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:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/s0/rs-1920x1080.jpg

Dementsprechend lautet meine CSS:

/* 100% HINTERGRUNDBILD
----------------------------------------------- */
html, body {
background: #000 url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/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 .


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.