Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AlexeyBoldin

responsive html5 banner with video

By AlexeyBoldin, in Banner Animation. Views: 11,367

Recommended Posts

Posted

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
  • Author
Posted

 

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
Posted

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
  • Author
Posted

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
Posted

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
  • Author
Posted
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account