Here’s a collection of some of the HTML code I’ve recently been using in several of these blog posts. Be wary to the fact that some of the indenting in this post is not always necessary, in each example.
The intention here was to make certain parts of the code snippets easily readable and fit more on each line width wise. I think this helps overall, although I’m not completely convinced. Oh and most of the gifs won’t appear on mobile devices due to the source formats.
Never mind though, here come the gifs.
<video> tag example, within the tag are source tags with URLS for
<video autoplay="" loop="" muted="">
Same again but this time without the
<source> tag. Here also are some examples of the attributes you can add/alter to style the video player’s appearance and functionality.
<video height="370" width="660" autoplay="" loop="" muted="">
The method for using Imgur embed code with in an
<iframe> tag. This one should appear on mobile device browsers as the embed source format is .gifv
<iframe class="imgur-embed" width="100%" height="325" frameborder="1" src="http://i.imgur.com/gXDFCu3.gifv#embed">
If not signed in you can get the embed code by clicking the “get embed codes” link at the bottom right of the image. However if signed in and it’s your own image. You can get the embed code in the current item’s links, listed on the right.
Same concept again except this time it’s for YouTube players and their embed code.
<iframe width="1080" height="500" src="//www.youtube.com/embed/o0u4M6vppCI" frameborder="1" allowfullscreen>
You can get the embed code by right clicking anywhere on the video itself and then selecting “get embed code”.
HTML5 the use of the
<center> tag is no longer supported, and styling such as this should be done in the CSS configs.
As I write my blogs in markdown using Hexo, the CSS plus styling can only be set generally and not specifically (element wise) for one specific post. At least without changing the
Jade template code. So I use the raw code below in the markdown for centering videos among other things.
This was done for all the images above in this post, bar the Imgur/YouTube embed iframes as they seem to centre automatically with my current CSS.
As we know now lines
5 are the important lines, all the data for the file is within the the
<a> tag simply adds a hyperlink within the media, leading directly to the hosted file on its own.
You can create the embed code when logged into your twitter account at the widget settings page.
<a class="twitter-timeline" href="https://twitter.com/5leightz" data-widget-id="533607279958818820">
Tweets by @5leightz
Tweets, and their hot-linked media can be embedded into sites as a
<blockquote> element. You can get the embed code from your social media dashboard application like TweetDeck or when logged into Twitter from a browser, by selecting the 3 dots icon at the bottom of a tweet.
Note the inclusive
align="center" attribute, and that the code sample is from/for TweetDeck.
<blockquote align="center" class="twitter-tweet" data-partner="tweetdeck">
— Dan and Dave (@bucktwins)
November 6, 2014
Here’s how to display reddit feeds (subreddits). The
data-subreddit=' ' attribute determines the feed in question. I used the /r/eve subbreddit as an example here.
<script src='//redditjs.com/subreddit.js' data-subreddit='eve'>
These feeds can be customised like most of the other
HTML media types shown here. See the guide linked in the quote at the end of this section for a full list of the
<script src='//redditjs.com/subreddit.js' data-subreddit='eve' data-height='400' data-width='330' data-sort='hot' data-theme='dark' data-subreddit-mode='grid' >
To embed PDF files use the “Object” tag, providing a link to download the file if the browser fails to render the interactive viewer.
The width and height can be adjusted as needed, percentage or absolute values work as seen in the example.
I’ll do another post like this if and when I come across more of the same type of stuff. Or I’ll just update this one. Shall see.
– Scarlz: @5car1z