Example URL: https://octovid.com/mothers-day/
We've broken this landing page into two sections (two seperate HTML code snippets), the video itself and the form to control it.
Video embed code:
<div class="player">
<iframe id='octovidlive' width=640 height=360 frameborder=0 allow='autoplay'></iframe>
<script>q=window.location.href.split(/[?#]/)[1];b='https://live.octovid.com/?q=5b0v3mzvrtsq&';
r='_ref='+document.referrer+'&';document.getElementById('octovidlive').src=b+r+q;</script>
</div>
<style>
@media only screen and (max-width: 400px) {
.player{
width=100%;
height: 160px;
}
}
@media only screen and (min-width: 450px) {
.player{
width=100%;
height: 420px;
}
}
</style>Form embed code:
<center><button class="button" onclick="javascript:document.getElementById('interact').style='display:block';this.style.display='none'">create your own video</button>
<div id="interact" class="interact" style='display:none'>
<input type='radio' class='radiobuttons' name='_v' id='_v' value='0' checked="checked">Heart Balloons<img src='https://octovid.com/wp-content/uploads/2021/01/dmg-md-video1.jpg'>
</input>
<input type='radio' class='radiobuttons' name='_v' id='_v' value='1'> Gift Box<img src='https://octovid.com/wp-content/uploads/2021/01/dmg-md-video2.jpg'>
</input>
<p class="text">To:<b></b></p>
<input id='_to'class="input" value="Mum" placeholder="Even type a product name..."></input>
<br>
<p class="text">Add your short message:<b></b></p>
<input id='_message'class="input" value="Have a lovely day!" placeholder="Have a lovely day!"></input>
<p class="text">From:<b></b></p>
<input id='_from'class="input" value="Susan" placeholder="Type your name..."></input>
<br>
<center>
<input type="checkbox" id="check">Tick this box to Agree to our <a href="https://octovid.com/legal/terms-and-conditions/">Terms & Conditions</a></input><br>
<button class="button" onclick="
v=document.querySelector('input[name=_v]:checked');
i=document.getElementById('_from');
p=document.getElementById('_to');
m=document.getElementById('_message');
o=document.getElementById('octovidlive');
u=document.getElementById('url');
r=document.getElementById('result');
c=document.getElementById('check');
if (!c.checked) {
alert('please tick the box');
}
else {
o.src=o.src.split('&')[0]
query = 'v='+v.value+'&_from='+i.value+'&_to='+p.value+'&_message='+m.value;
o.src+='&'+query;
u.value='https://octovid.com/mothers-day/'+'?'+query;
document.getElementById('whatsapp').href = 'https://api.whatsapp.com/send?text=Happy Mothers Day '+p.value+' from '+i.value+' '+encodeURIComponent(u.value).replaceAll('%20','%2520');
o.src+='%26'+query;
document.getElementById('facebook').href = 'http://www.facebook.com/sharer.php?u='+encodeURIComponent(u.value).replaceAll('%20','%2520');
document.getElementById('email').href = 'mailto:%20?subject=Happy Mothers Day!&body=Click here to see the video I made just for you '+p.value+' '+encodeURIComponent(u.value).replaceAll('%20','%2520');
r.style='display:block';
}
">Show me!</button>
<br>
<div id='result' style='border:2px solid red; display:none'>
<textarea id='url' style='width:100%'></textarea>
<button onclick="javascript:
u=document.getElementById('url');
u.select();
u.setSelectionRange(0, 99999);
document.execCommand('copy');
">copy to clipboard</button><br>
Share on:
<a id='whatsapp' class="share" href='#'><i class="fa fa-whatsapp"></i></a>
<a id='facebook' class="share" href='#'><i class="fa fa-facebook"></i></a>
<a id='email' class="share" href='#'><i class="fa fa-envelope"></i></a>
</div>
</div>
<style>
@media only screen and (max-width: 300px) {
.interact{
width=100%;
height: 160px;
}
.text {
width=40%
}
.input {
width: 100%;
}
}
@media only screen and (min-width: 400px) {
.interact{
width=100%;
height: 200px;
}
.text {
width=100%
}
.input {
width: 100%;
}
}
.text {
color:white;
font-family:pt sans;
font-size:24px;
text-align: left;
display: block;
margin-left: auto;
margin-right: auto;
}
.share {
color:white;
font-family:pt sans;
font-size:44px;
margin-left: 20px;
margin-right: auto;
}
.interact {
color:white;
font-family:pt sans;
font-size:24px;
}
.input {
display: block;
margin-left: auto;
margin-right: auto;
height: 55px;
font-family:pt sans;
font-size:22px;
padding: 12px 20px;
}
.choice{
color:white;
font-family:pt sans;
font-size:18px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.radiobuttons {
margin-right: 2px;
vertical-align: middle;
margin: 15px;
height: 20px;
width: 20px;
background-color: #fff;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
margin-left: auto;
margin-top: 20px;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
font-family:pt sans;
font-size:22px;
}
.button:hover {
background-color: green;
}
</style>That's it! If you have any questions contact support support@octovid.com
