Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Embeded Youtube video not displaying when scaled

$
0
0

I'm embeding a youtube video using this method:

 

var youtubevid = $("<iframe/>");

sym.$("vcontainer").append(youtubevid);

youtubevid.attr('type','text/html');

youtubevid.attr('width','540');

youtubevid.attr('height','380');

youtubevid.attr('src','http://www.youtube.com/embed/YNuG2ZhVrDI?rel=0&autoplay=1'); 

youtubevid.attr('frameborder','0');

youtubevid.attr('allowfullscreen','0');

 

This works fine.  But, as soon as I add the below code to scale the stage the video is just black(no controls either) but the audio plays.  Any idea why this would be happening?

 

 

 

 

var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

 

sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

"transform-origin":"0 0",

"-ms-transform-origin":"0 0",

"-webkit-transform-origin":"0 0",

"-moz-transform-origin":"0 0",

"-o-transform-origin":"0 0"

});

 

function scaleStage() {

    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

 

    var parentWidth = stage.parent().width(); // Get the parent of the stage width

    var stageWidth = stage.width(); // Get the stage width

    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

    var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

 

// Rescale the stage!

     stage.css('transform', 'scale(' + rescale + ')');

    stage.css(  '-o-transform', 'scale(' + rescale + ')');

     stage.css('-ms-transform', 'scale(' + rescale + ')');

    stage.css('-webkit-transform', 'scale(' + rescale + ')');

     stage.css('-moz-transform', 'scale(' + rescale + ')');

    stage.css('-o-transform', 'scale(' + rescale + ')');

    parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

}

 

// Make it happen when the browser resizes

$(window).on('resize', function(){

     scaleStage();

});

 

// Make it happen when the page first loads

$(document).ready(function(){

    scaleStage();

});


Viewing all articles
Browse latest Browse all 9897

Trending Articles