C.J. Scarlett

HTML Media Code Snippets

Preamble

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 - Standard Example

Standard <video> tag example, within the tag are source tags with URLS for .webm and .mp4 containers.

1
2
3
4
<video autoplay="" loop="" muted="">
<source type="video/webm" src="http://i.imgur.com/nDG57pe.webm">
<source type="video/mp4" src="http://i.imgur.com/nDG57pe.mp4">
</video>

HTML Output




Video Tag - Custom Parameters

Same again but this time without the .webm link <source> tag. Here also are some examples of the attributes you can add/alter to style the video player’s appearance and functionality.

1
2
3
<video height="370" width="660" autoplay="" loop="" muted="">
<source type="video/mp4" src="http://i.imgur.com/eHAlXli.mp4">
</video>

HTML Output



<video> Attributes Reference


Imgur iframe Tag Embed

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

1
2
<iframe class="imgur-embed" width="100%" height="325" frameborder="1" src="http://i.imgur.com/gXDFCu3.gifv#embed"> 
</iframe>

HTML Output

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.


YouTube iframe Tag Embed

Same concept again except this time it’s for YouTube players and their embed code.

1
2
<iframe width="1080" height="500" src="//www.youtube.com/embed/o0u4M6vppCI" frameborder="1" allowfullscreen> 
</iframe>

HTML Output

You can get the embed code by right clicking anywhere on the video itself and then selecting “get embed code”.

<iframe> YouTube Player Parameters
<iframe> API Documentation


Hexo, Markdown Generators, & Direct Links

In 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.

1
2
3
4
5
6
7
8
<center>
<a title="Follow the White Rabbit" href="http://i.imgur.com/qijwVaz.gifv">
<video autoplay="" loop="" muted="">
<source type="video/webm" src="http://i.imgur.com/qijwVaz.webm">
<source type="video/mp4" src="http://i.imgur.com/qijwVaz.mp4">
</video>
</a>
</center>

HTML Output





As we know now lines 4 and 5 are the important lines, all the data for the file is within the the <videotag>. The <a> tag simply adds a hyperlink within the media, leading directly to the hosted file on its own.


Twitter Timelines Embed

You can create the embed code when logged into your twitter account at the widget settings page.

1
2
3
4
5
6
7
<a class="twitter-timeline" href="https://twitter.com/5leightz" data-widget-id="533607279958818820">
Tweets by @5leightz
</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.
id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

HTML Output




Embed Timeline Documentation


Twitter Quote Blocks Embed

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.

TweetDeck Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<blockquote align="center" class="twitter-tweet" data-partner="tweetdeck">
<p>
30 years. What an incredible journey it has been. The adventure continues...
<a href="http://t.co/jts0GR4lNQ">http://t.co/jts0GR4lNQ</a>
<a href="http://t.co/OogYa1T7jt">pic.twitter.com/OogYa1T7jt</a>
</p>
&mdash; Dan and Dave (@bucktwins)
<a href="https://twitter.com/bucktwins/status/530413926417059840">
November 6, 2014
</a>
</blockquote>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

HTML Output

Embed Tweets Documentation


Reddit Feeds - Standard Example

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.

data-subreddit='subbredit-name'
1
2
<script src='//redditjs.com/subreddit.js' data-subreddit='eve'>
</script>

HTML Output


Reddit Feeds - Custom Parameters

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 JavaScript code attributes you can use.

1
2
<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' >
</script>

HTML Output

Reddit Embed Widgets Guide


PDF Documents

To embed PDF files use the “Object” tag, providing a link to download the file if the browser fails to render the interactive viewer.

1
2
3
4
5
6
7
8
9
<object data='http://packetlife.net/media/library/23/common_ports.pdf#' 
type='application/pdf'
width='100%'
height='1200'>


<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://packetlife.net/media/library/23/common_ports.pdf'>click here to download the PDF file.</a></p>

</object>

The width and height can be adjusted as needed, percentage or absolute values work as seen in the example.

HTML Output



It appears your Web browser is not configured to display PDF files.
No worries, just click here to download the PDF file.




In Closing

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