Create big screen template in html

Create big screen template in html

A big screen template is an optimized html to show in such kind of display.

The design is a simple html using css and javascript if needed. With replacements this replacements are into brakets [variablename] for example: #[hashtag] will be replaced with the current hashtag text ie: #Flowers or anything else

This is a basic template that shows an image or video in full screen with a comment and a subtitle indicating the current hashtag, uses google fonts with Passion One font, the subtitle displays something like:
Hashtag #Flowers Instagram
with the word #Flowers in green color and other wording in blue.

The HTML code:

<!doctype html>
<html>
<head>
<!– Google fonts resource link –>
<link href=”https://fonts.googleapis.com/css?family=Passion+One” rel=”stylesheet”>
<meta charset=”utf-8″>

<style type=”text/css”>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
background: #000; /* background color */
font-family: ‘Passion One’;
font-weight: 100;
font-size: 2.5em;
-webkit-text-fill-color: #ffffff; /* font color, stroke width and color */
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
.ht{ /* hashtag text settings */
-webkit-text-fill-color:#00FF00;
}
.content { /* content div settings */
margin: 0 auto;
width: 100%;
max-width: 100%;
padding: 0 15px;
position: absolute;
bottom: 5%;
}

.subtitle{ /* subtitle settings font size color and opacity */
margin: 0 auto;
max-width: 90%;
padding: 0 15px;
position: fixed;
bottom: 5%;
right: 5%;
font-size: 1.5em;
-webkit-text-fill-color: #03a9f4;
opacity: 0.8;
}

h1 { /* comment font settings */
margin: 60px 0;
padding: 0;
text-align: center;
opacity: 0.8;
}

.fullscreen{ /* centered fullscreen image or video this class is applied to video tag */
min-height: 100%;
min-width: 100%;
display: block;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
</style>

</head>

<body>

<!– <video> tag will show the image and the video if availbale if the video is not available will show just the image –>

<!– [images.standard_resolution.url] will be relaced with the photo url like: http://instagram.com/photo_1.jpg –>
<video id=”video” loop muted autoplay poster=”[images.standard_resolution.url]” class=”fullscreen”>

<!– [videos.standard_resolution.url] will be relaced with the video url like: http://instagram.com/video_1.jpg –>

<source src=”[videos.standard_resolution.url]” type=”video/mp4″>
</video>

<div class=”content”>
<!– [comment] will be replaced with the current comment –>
<h1>[comment]</h1>
</div>

<div class=”subtitle”>
<!– [hashtag] will be replaced with the current hashtag text like: #Flowers or anything else –>
Hashtag <span class=”ht”>#[hashtag]</span> Instagram
</div>

</body>
</html>

This HTML code result in big screen:

big-screen-cast1-1024x1024

Add your template to bigscreencast software