Jump to content
GreenSock

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

responsive html5 banner with video

Recommended Posts

Hi guys!
Your community is awesome! I often read this forum but now I can not find an answer to my question.
 
I need to make a responsive banner that stretches vertically and horizontally within certain limits (320x268 -> 1080x328). Inside this responsive container must play video.
 
Advertising requirements are as follows:
 
Transitions in the banner must use the value of the parameter linkN from get parameters of URL to the HTML-document as follows: for the first click link1, link2 for the second, etc. You can use the following code:

 

 

<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>

<a id="click1_area" href="#" target="_blank">...</a>
<a id="click2_area" href="#" target="_blank">...</a>
<a id="click3_area" href="#" target="_blank">...</a>

// After "<a href ...></a>" assign them to click handlers:

<script>
document.getElementById("click1_area").href = getUrlParam('link1');
document.getElementById("click2_area").href = getUrlParam('link2');
document.getElementById("click3_area").href = getUrlParam('link3');
</script>

For Video:

 

Appeal to the video should be on the parameter URL videoN starts from 1

var video = getUrlParam('video1');
 
Where getUrlParam realized as in the requirements above for HTML5.
 
Starting the video should only happen by pressing the "Play" button.
Should displays information about the weight of the video (Mb).
There should be a mute button.
 
 

Thank you guys for any help!

Link to comment
Share on other sites

Hi AlexeyBoldin,

 

Welcome to the forums!

 

May I ask you, and forgive me if I sound dumb, but what is your question? What are you stuck in?

 

You can set your ad size to be percentage-base and limit it to the amounts that are required with min/max-width, min/max-height. Then, position your elements relative to the size of the banner as well as their sizes.

 

Video, well, that's a whole different kettle of fish depending on the adPlatform that this ad is going. You can get the general usage of video in w3schools.com for example.

 

Does that help?

  • Like 3
Link to comment
Share on other sites

Thank you for your answer!

I forgot to say that I am a complete newbie in html, mostly I am a designer. I do everything in Adobe Animate + GS. But now it's a more complex task for me. Maybe for you guys it sounds funny, but for me it's a real challenge :D
Maybe there is a little example that I could see and repeat it?
Thank you for understanding!
Link to comment
Share on other sites

More than happy to help. Won't be able to give you a hand with Animate + GS but there are others here that have plenty of experience with it, they'll know the ins and outs.

 

First things first: Will you be working with Animate? And What's the adPlatform this is going to be served in?

  • Like 1
Link to comment
Share on other sites

Thanks! If it can be done with Animate it will be great. If not - I'll try to understand how it works. It's new ad format for mobile version of Yandex.

Link to comment
Share on other sites

It's bedtime for me here, let's see if someone who has experience with Animate will chime in, otherwise, I'll whip something up as an example at some point tomorrow.

 

Does that sound ok?

  • Like 1
Link to comment
Share on other sites

It's bedtime for me here, let's see if someone who has experience with Animate will chime in, otherwise, I'll whip something up as an example at some point tomorrow.

 

Does that sound ok?

 

Yes, thanks a lot!

 

 

Try this blog post. 

 

http://inflagrantedelicto.memoryspiral.com/2016/02/responsive-scaling-in-animate-cc/

 

Also ad platform is very important to know. Many of the ad vendors have templates for specific high impact ads.  I don't see that size listed on Yandex.

 

https://yandex.com/adv/requirements/html5

 

 

Thank you! I remember this article, I will try to study it in more detail tomorrow.

This ad format new for Yandex, they start it only one week ago. No examples ( There is only what I wrote at the beginning of this topic and your link to html5 requirements.

Link to comment
Share on other sites

Let us know if the article somnamblst has linked solves your question.

 

As for the video, the link I posted earlier on this thread will have information on how to control the video dynamically. You will have to check with the adPlatform if they have their own methods on top of the standard html video methods.

  • Like 1
Link to comment
Share on other sites

With your help, I made a html code that works correctly. I hope so. Everything works locally on my computer. But I do not understand how to implement video downloads by variable. They are asked to do so:

 

 

Appeal to the video should be on the parameter URL videoN starts from 1

var video = getUrlParam('video1');
 
Where getUrlParam realized as in the requirements above for HTML5.

 

This is the code that I have now:

<!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%;
    }
    
    
    #canvas {
        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 onload="init();">

        <a id="click1_area" href="#" target="_blank" style="width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 9;">
		
            <video id="canvas" width="400" height="224" controls>
                <source src="video_for_banner.mp4" type="video/mp4">
            </video>
   
        </a>
        <script>
            document.getElementById("click1_area").href = getUrlParam('link1');
            home.expandableBannerAPI.close();
        </script>
        
    </body>
</html>

I would be very grateful if you tell me how to realize what they are asking for!

Link to comment
Share on other sites

Oh.

 

Hmm, shouldn't it be:

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, " "));
}


var video = document.getElementById('canvas'); // You should probably call that video to avoid confusion
video.addEventListener('canplaythrough', function() {
 // Do something.
  this.play();
});
video.src = getUrlParam('video1');
  • Like 1
Link to comment
Share on other sites

Thank you for your answer!

It is right?
To be honest, I'm sure that I did not properly)
<!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, " "));
}
    
var video = document.getElementById('video');
video.addEventListener('canplaythrough', function() {
 // Do something.
  this.play();
});
video.src = getUrlParam('video1');
    
</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 onload="init();">

        <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>
            document.getElementById("click1_area").href = getUrlParam('link1');
            home.expandableBannerAPI.close();
        </script>
        
    </body>
</html>
Link to comment
Share on other sites

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

You could probably comment out that source.

 

And test it by adding the query to the URL

 

something like:

https://example.com/my-banner/index.html?video1=https://example.com/my-banner/video.mp4&link1=https://www.google.co.uk
  • Like 1
Link to comment
Share on other sites

I tried, and it does not work.

Locally it is running with this
 
<video id="video" width="400" height="224" controls>
    <source src="video_for_banner.mp4" type="video/mp4">
</video>
 
And if i commented it — video1 not working, the player is empty.
Video does not load, and clicktag works.
Link to comment
Share on other sites

Move 

var video = document.getElementById('video');
video.addEventListener('canplaythrough', function() {
 // Do something.
  this.play();
});
video.src = getUrlParam('video1');

To the lower <script> tag, it probably can't find the v video element because it hasn't been defined yet.

  • Like 1
Link to comment
Share on other sites

Now the code looks correct in your opinion?

 

But the video still does not load on my server if i commented
<source src="video_for_banner.mp4" type="video/mp4">

... The player does not show an error. It just empty.

<!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 onload="init();">
        <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>

        <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>     
    </body>
</html>
Link to comment
Share on other sites

What browsers did you test in?

 

http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/

 

Have you thought about using Youtube to play your video?

<div id="player"></div>
	<canvas id="canvas" width="300" height="600"></canvas>

<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '182',
            width: '298',
            videoId: '*******',
            playerVars: {
                'autoplay': 1,
				'modestbranding':1,
                'controls': 1,
				'fs': 0,
				'rel': 0
            },
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });

    }

    var playerReady = false;
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        playerReady = true;

    }


    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            <!-- alert('done'); -->

        }
    }

 
</script>

	

Link to comment
Share on other sites

 

Now the code looks correct in your opinion?

 

But the video still does not load on my server if i commented
<source src="video_for_banner.mp4" type="video/mp4">

... The player does not show an error. It just empty.

<!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>

 

But are you using the query parameter to pull in the video?

Link to comment
Share on other sites

<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>

All this does is return a string from the current URLs query parameters.

// So if your URL is https://www.google.com'>http://example.com/my-banner/index.html?link1=https://www.google.com

console.log(getUrlParam('link1'));
// https://www.google.com


// https://www.google.com'>http://example.com/my-banner/index.html?link1=https://www.google.com&video1=http://www.w3schools.com/html/mov_bbb.mp4

console.log(getUrlParam('link1'));
// https://www.google.com

console.log(getUrlParam('video1'));
// http://www.w3schools.com/html/mov_bbb.mp4
Link to comment
Share on other sites

You can see all the things here, maybe I missed something...


And thanks again for your help! 

Link to comment
Share on other sites

Your clicktag being  100% width and height appears to be blocking everything. 

Link to comment
Share on other sites

I totally deleted this piece of code but nothing happened...

<a id="click1_area" href="#" target="_blank" style="width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 9;"></a>
Link to comment
Share on other sites

Since the vendor is telling you what you must do, have you asked the vendor for a working example?

 

Also, have you tried another video as a troubleshooting test. For instance codecs matter. You can download bigbunny.mp4 here

 

http://camendesign.com/code/video_for_everybody/test.html

 

Recommended video codec for MP4 video format is H.264 with following settings:

Optimized for Web ( moov atom at the front of the file )

  • Progressive scan (no interlacing)
  • Like 1
Link to comment
Share on other sites

Thank you for your advice! I replaced the video on this from the example. And it is has not given result. Video still played directly, but it is not loaded by variable...

 

Typically, Yandex does not negotiate with its advertisers. If something does not work, they say you have to do in accordance with the requirements. There is not much help. This format is 1 week old. Unfortunately, they were told that there are no examples.

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.
×