Dynamic src for youtube embed not working

[m.langdon...@gmail.com]

Hello,

I'm working on a banner ad which links to an iframe that displays youtube videos for different used vehicles. I have a hand-coded file that works fine to swap out the video source, depending on the vehicle listed, with jQuery, but in GWD it sticks on the default URL, and console doesn't appear to generate any errors. The code:

var video_id = $(results_xml[result_index]).find('video_embed_code').text();
video_id = video_id.substring(video_id.indexOf("watch?v=")+8,video_id.length);
video_id = "https://www.youtube.com/embed/"+video_id;
$('#tap_video').attr('src',video_id);

targeting iframe...

<iframe class="gwd-iframe-wyk3" id="tap_video" src="https://www.youtube.com/embed/hjdcZq35PcU"></iframe>

XML data on our server is parsed for the embed code and appended to the URL for each vehicle. The iframe is added as a manual tag as the iframe component in GWD refers to the URL as "source" rather than "src", and the youtube embed calls it "video-url". I thought maybe since the jQuery was looking for attribute "src" this was the cause, but it doesn't seem so. Any help would be great.

-Matt-

[m.langdon...@gmail.com]

UPDATE

The issue here seems to be that the iframe and src aren't loaded until the event to navigate to that expanded page is fired. GWD must set the value of the page as hidden, so its not loading initially? The trouble now is if I execute a command to change the iframe source onLoad, it runs each time the new URL loads and gets stuck in a loop. Any ideas?

-Matt-

[Kishore Subramanian]

Hi Matt,

The default behavior of the browser is to load the web page specified by the iframe's src attribute. So if the iframe is on an expanded page, it makes sense to defer loading the iframe until the user navigates to the expanded page. GWD does this 'lazy loading' by setting the 'source' attribute instead. The iframe component automatically set the 'src' when the page (the expanded page in this case) is loaded.

Option #1:

Set the source attribute instead of the src. <iframe source="embed code of youtube"

Option #2:

Why not use the YouTube component provided by GWD instead? The YouTube component handles the youtube apis for you.

You can dynamically set the video-url attribute from code as follows:

<script type="text/javascript" id="gwd-init-code">

      (function() {

document.body.style.opacity = "0";

var youtubeEl = document.getElementById('youtube-1');

var gwdAd = document.getElementById('gwd-ad');

/**

 * Handles the DOMContentLoaded event. The DOMContentLoaded event is

 * fired when the document has been completely loaded and parsed.

 */

function handleDomContentLoaded(event) {

  // Here are examples of tasks that can be performed in this method:

  // * Set dynamic values for element attributes.

  // * Show a progress image to the user before the Ad is shown.

   youtubeEl.setAttribute('video-url', <new value of youtube video url>);

}

</script>

Let us know if this helps.

[m.langdon...@gmail.com]

Great info! I got it to work using a manual iframe tag, but if I can use this with the Youtube component, that would be ideal. Thanks for getting back to me!

-Matt-

[m.langdon...@gmail.com]

Update on this. I got it to work somewhat with the Youtube component, however, I can't have it load under handleDomContentLoaded since that sets the id as the ad loads. I need it to change dynamically for each vehicle viewed. I got it to work by setting the youtube video id when that page loads (the ID comes from a variable in a separate javascript file) but for each subsequent video you try and load, it tries to append the variable as a string ("video_id") to the URL, rather than the value of variable video_id, which is the unique Youtube ID. Any idea why this would happen? In the code for the GWD function, I did have to manually change the parameters for video-url from a string to variable, and they seem to default back to string sometimes.

-Matt-

[Kishore Subramanian]

Is it possible for you to share your creative for us to debug?

Kishore

[m.langdon...@gmail.com]

Sure thing. Where should I send them?

-Matt-

[Naresh Rajkumar]

Please send it to  gwd-s...@google.com 

[Kishore Subramanian]

Looking into it. Should have an update soon.

[Kishore Subramanian]

Hi Matt, 

Here is an update:

1) Issue with video_id becoming a string instead of a variable

You may have hit a bug in GWD here. You have code as follows:

gwd.auto_Expanded_page_2Pageload = function(event) {

   // GWD Predefined Function

  gwd.actions.gwdYoutube.setYouTubeId('tap_video', video_id);

};

Note that you have modified the call to remove the quotes around video_id to refer to a variable instead. However, the Events panel in GWD expects the 2nd parameter to be a string and hence does not recognize it. We will file an issue to track this.

Workaround: Remove the "GWD Predefined function" comment. 

gwd.auto_Expanded_page_2Pageload = function(event) {

  gwd.actions.gwdYoutube.setYouTubeId('tap_video', video_id);

};

With this change, the Events dialog will treat this as a custom handler and you should be able to refer to the video_id as a variable.

2) I set video_id in jsfunction.js as follows:

window.video_id = 'WhIoxwTjJWE';

With these changes, I am able to see the specific YouTube video. I dont see the video_id as a string anymore. Please try this and let us know if it does not work.

[m.langdon...@gmail.com]

Hi Kishore,

I tested this out, and the variable does not seem to be defaulting back to a string, which is great. However, the video will still only play the first time, and subsequent plays by clicking my "Video" button just yield an error message. The URL on the second playback is always "https://www.youtube.com/watch", so it doesn't seem to be loading the variable that second time, and is left blank (I've left the source field blank in the component properties too, so it seems to be loading that as a blank value on the second play?). Since I need the video source to change with each new vehicle, I'm wondering if having the Video ID change on pageload of the expanded page where the Youtube component is maybe isn't the best option? Would that cause it to only set the ID the first time it loads?

-Matt-

[Kishore Subramanian]

Let me try it with a simpler example and get back to you.

[m.langdon...@gmail.com]

Sounds good. I should note that browser console does generate the following error on attempting playback of additional videos

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('null').

-Matt-

[Kishore Subramanian]

Hi Matt,

I created a simple Ad to reproduce the issue you are running into. Extract the zip contents and run the HTML.

- Clicking the Red taparea on the first page will load the 2nd page and set the video and the image on the 2nd page to A7 sendan assets.

- Clicking the green taparea will load the assets of the A3 sedan.

I used the pagepresenting event to set the image sources with a couple of lines of custom code in the event handler.

The downside to this approach is that the image is loaded after the page is shown. Ideally, you would want the new image source to be set and loaded before presenting the 2nd page to the user. Unfortunately, we dont currently have a good event for you to latch on to. I will file a request internally to support this use case.

Please let us know if this solution works for you.

~ Kishore

[m.langdon...@gmail.com]

I implemented that on my Video toucharea and it worked perfectly, even using video_id as a dynamic source. The issue now though is that I've set an event to return to the results page on pause, and IT only works when pausing the first video now. Subsequent videos stay on the Youtube page when paused (the reason for using this is that my custom controls wont work on iPhone due to the native video handling overlay).

-Matt-

[Kishore Subramanian]

Did you get this to work?

[m.langdon...@gmail.com]

Not the pause event. Still only redirects back to the page when pausing the first video. Not sure why it doesn't fire for subsequent vids

-Matt-