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











IMAGE