Jump to content
GreenSock

AlexeyBoldin

responsive html5 banner with video

Go to solution Solved by AlexeyBoldin,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Surely that's something you can push back to them. If you are creating new formats they must provide working examples.

 

How about picking another format that has a video and a template and cannibalizing some of it to use in this new format?

  • Like 2
Link to comment
Share on other sites

 

Wow =) , it works! But what is the difference?

Can you explain it to me? This is the same code, or you made some modifications?

 

 

Surely that's something you can push back to them. If you are creating new formats they must provide working examples.

 

How about picking another format that has a video and a template and cannibalizing some of it to use in this new format?

 

 

This is Yandex. With them it is very difficult to negotiate about something.

In any case, I sent them what I've got, let's see what they say.

Link to comment
Share on other sites

Here is the code I used:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>
  <meta charset="utf-8" name="ad.size" content="width=320,height=268">
  <title>320x268_YandexVideo</title>
  <!-- write your code here -->
  <script>
    function getUrlParam(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^]*)"),
      results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
  </script>
  <style>
    body {
      margin: 0px;
      height: 100%;
    }

    #video {
      border: 1px solid gray;
      width: 100% !important;
      height: 100% !important;
      min-width: 320px;
      max-width: 1080px;
      min-height: 268px;
      max-height: 328px;
      object-fit: contain;
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: block;
      background-color:rgba(00, 00, 00, 1.0);
    }
  </style>
</head>
<body>
  <a id="click1_area" href="#" target="_blank" style="width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 9;">
    <video id="video" width="400" height="224" controls>
      <!--<source src="video_for_banner.mp4" type="video/mp4">-->
    </video>
  </a>
  <script>
    var video = document.getElementById('video');
    video.addEventListener('canplaythrough', function() {
      // Do something.
      this.play();
    });
    video.src = getUrlParam('video1');

    document.getElementById('click1_area').href = getUrlParam('link1');
    home.expandableBannerAPI.close();
  </script>
</body>
</html>
  • Like 1
Link to comment
Share on other sites

Dude, it's incredible! Thank you so much for your help, looks like it works! I will write a Yandex response later when they answer =)

Link to comment
Share on other sites

Since this is a Animate authored banner ad with video question, I thought I would jump in and add that I just got around to checking out what is new in the Animate 2017 release, and I'll be damned if they did not give us an HTML5 video component.

 

 

  • The Source parameter allows us to select video file from a local location or provide any URL to play the video (mp4, ogg, ogv, or webm formats). 

 

https://helpx.adobe.com/animate/using/using-components-in-animate-cc.html

 

and a virtual camera tool.

 

https://helpx.adobe.com/animate/how-to/virtual-camera.html

  • Like 2
Link to comment
Share on other sites

  • Solution
After a few corrections Yandex accepted this code:

 



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>
<meta charset="utf-8" name="ad.size" content="width=320,height=268">
<title>320x268_YandexVideo</title>
<!-- write your code here -->
<script>
function getUrlParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
<style>
body {
margin: 0px;
height: 100%;
overflow: hidden;
cursor: pointer;
}

#video {
border: 1px solid gray;
width: 100% !important;
height: 100% !important;
min-width: 320px;
max-width: 1080px;
min-height: 268px;
max-height: 328px;
object-fit: contain;
position: fixed;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: block;
background-color:rgba(00, 00, 00, 1.0);
}
</style>
</head>
<body>

<video id="video" width="400" height="224" controls>
<!--<source src="video_for_banner.mp4" type="video/mp4">-->
</video>

<script>
var video = document.getElementById('video');
video.addEventListener('canplaythrough', function() {
this.pause();
});
video.src = getUrlParam('video1');


document.getElementById('video').onclick = function() {
if (video.paused && ! video.ended) {
video.play();
video.setAttribute("controls", "controls") ;
return;
}
window.open(getUrlParam("link1"));
homeExpandableMobileBannerAPI.close();
};

document.body.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() !== 'body') {
return;
}
onCLickBody()
}, true);

function onCLickBody(){
window.open(getUrlParam("link1"));
homeExpandableMobileBannerAPI.close();
}
</script>
</body>
</html>


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×