Guide on how to make a Videobanner compatible with DFP using Tumult Hype

Hey there,

This is what we are trying to achieve:
-An HTML5/Mobile friendly videobanner
-Ad dimensions 300x250
-Ad will show an embeded video from Youtube within 300x200 pixels.
-Rest of the area in the banner should be clickleable and those clicks need to be tracked with Google DFP.

So we want to use this with Google DFP Small Business.

I could not post more on a similar topic due to forum limits. But I would like help regarding how this can be achieved step by step, because we are very interested in buying some licenses of Hype if we can achieve this.

Thanks for your help!

There is a specific workaround for video in DFP here: Using Hype with DoubleClick ads & video - #3

For Youtube, please see the solution here: Guide on how to make a Videobanner compatible with DFP using Tumult Hype - #19 by alexandre.lemay

Here's our DFP tutorial which is a great place to start: Howto: Deploying Hype animations to DoubleClick Studio

Thanks
Would be really useful to have a working example which you can download and use as a starting point

There is an example with sample code in the first thread: Howto: Deploying Hype animations to DoubleClick Studio

You can use that document as a starting point.

Hi guys,
I am quite used to work with Hype and DFP but still haven’t figured this one out yet… Is there a working example out there by now of a Hype creative containing videos that works in Google Studio (DFP)? I’ve been struggling with this one for a while now and I can’t get the videos to play on tablets (Samsung AND iPad). I could go with a YouTube video or simply dragging the 3 versions video in Hype, I don’t mind at that point. (MP4, MPEG and OGG).

I’ve tried everything in the forum here and nothing will do.

Thank you.

What errors do you see in the browser console when viewing on an iPad or Samsung device?

This is the documentation for video in DFP Studio:

https://support.google.com/richmedia/answer/2792620?hl=en&ref_topic=2792545

I recommend inserting your video tag within the inner HTML of a rectangle for more control.

Hi Daniel,

Thank you for your quick response. The document I sent to DFP was not built using the «Inner HTML technique», so let’s put it aside for now and focus on what you suggest.
I think I built this according to the procedure (link you sent), but somehow, the video won’t even play on a Hype Preview, so I didn’t bother trying to send it to DFP.
I must be missing something major here…

[cid:8D71FF0E-A022-4798-AB1A-E5FB7BAA7012]

Thank you for your help.

To access a file in your resource library, you would use: src="${resourcesFolderName}/file.mp4"

Hi Daniel,
I feel like this is standard rookie HTML, but I can’t get it to work, sorry. That’s why I need tools like Hype to do it for me ;-).

What am I missing? I tried theses without success:

src="{assets}/ShoeReview.mp4»> src=«/assets/ShoeReview.mp4»> src=«/assets/ShoeReview.mp4»>

I tried changing the name of the video folder in the Ressources section as well, but still won’t work. Is the later relevant?

Thank you so much for your help.
Once I get it right, I will use this a lot and will be able to let go of other authoring tools I don’t like so much… GWD not to mention it.

[cid:CB1CEE96-9083-4EA4-AF13-67F8709690C7]

Did you see my previous reply?

Yes I see your previous reply.

And since my video files are in a folder named «assets», I mentionned it in the Inner HTML as you suggested. It didn’t work, so I tried different things such a
src="{assets}/ShoeReview.mp4»> src=«/assets/ShoeReview.mp4»> src=«/assets/ShoeReview.mp4»>

Won’t work.

[cid:7BCC8A73-C73C-48D6-B555-9C3199D3B4BF]

They are not in a folder called assets, they are in your resource folder (at least I can see them in your screenshot).

You can reference your MP4 file by using this src="${resourcesFolderName}/ShoeReview.mp4

That's the only variable for accessing files in your resource folder that you can use, so don't invent any more :slight_smile:

If you have these files also on a server, you can use the full url, like src="http://site.com/ShowReview.mp4"

Hi Daniel,

My Bad. I tried it as first with {ressourcesFolderName} and somehow it didn’t work, so I figured I had to change it to MY folder name. It’s now working, in Hype Preview in Chrome and all the way to DFP Preview without a single item in the Console, but when I push it to a Samsung Tablet, here is what I have. Sometiimes the message in the console refers to the MP4, sometimes the Webm… And strangely the Poster appears a different size.

[cid:FBDC6002-0F7A-4821-8D36-6C536D5F44D4]

[cid:489DEA85-36D2-4F20-BB8F-B556399BBD24]

When you export your document, don’t use spaces in the document name.

The only name with a space I could find was an export preset that I’ve used a thousand times before with DFP, but it’s not a bad idea to remove the space to begin with. Unfortunately, it doesn’t seem to change anything for the present problem… If this is really supposed to work, might I suggest you share a working example? I am in no rush and have been trying various methods for months now. This method or YouTube videos… which ever allows me to have video creatives on mobile devices via DFP.

Thanks

Just to be clear, the screenshot you were posting is a screenshot from chrome developer tools in responsive design mode simulating a Samsung device? Or is it some other device/ simulation test?

Since the error is a 404 error, this doesn’t really seem to be an issue with hype but any issue with either your connection to the server or the way that the animation was uploaded. I’d be happy to look into this further – is there a way to share access with your creative with me?

I don’t have a specific video for this exact workflow, but what I learn from this thread I will share with others :slight_smile:

A post was split to a new topic: DFP Video Issue

Sent you a PM.

Thank you Daniel for your precious help! I also found a way to use a YouTube Video that would work with DFP. Using Inner HTML and a script like this will do it:

<div id="player"></div>
<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', {
      width: '404',
      height: '227',
      videoId: 'phOul5I4pIU',
      playerVars: {rel: 0, autoplay: 1, controls: 1, modestbranding: 1, showinfo: 1, muted: 1, autohide: 1, loop: 1, playlist: 'phOul5I4pIU'},
    
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
       event.target.setVolume(0);
   event.target.playVideo();
  }
  // 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.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
//      setTimeout(stopVideo, 6000);
              done = true;
    }
       event.target.setVolume(0);
  }
</script> 
</div>
1 Like

I’m pretty sure some of the variable in this script are obselete, but feel free to explore what’s possible here :slight_smile:https://developers.google.com/youtube/player_parameters

1 Like