Resizing embedded Youtube frames

[rustwood]

Hi.

I've been running our website www.thedavidhall.org.uk on 1.3.9 using the standard template for a couple of years now and we've been very happy with it - especially the embedded Youtube clips showing the film or artist. Now however I want to upgrade to 1.5.4 and use a resizeable template. I made a copy testsite and loaded several resizeable plugins. All elements work well except the Youtube Iframes which, when shown on my mobile phone (Huaway) remain the same size, spilling over the side of the site.

I understand that the Youtube embed code contains its size which is presumably what is causing the problem

eg <p><iframe frameborder="0" height="315" src="https://www.youtube.com/embed/5JxhlxRc9U4" width="560"></iframe></p>

Please can anyone advise me how it can be resolved so that Youtube resizes appropriately?

Many thanks

Tony

[davewest]

Hi.

I've been running our website www.thedavidhall.org.uk on 1.3.9 using the standard template for a couple of years now and we've been very happy with it - especially the embedded Youtube clips showing the film or artist. Now however I want to upgrade to 1.5.4 and use a resizeable template. I made a copy testsite and loaded several resizeable plugins. All elements work well except the Youtube Iframes which, when shown on my mobile phone (Huaway) remain the same size, spilling over the side of the site.

I understand that the Youtube embed code contains its size which is presumably what is causing the problem

eg <p><iframe frameborder="0" height="315" src="https://www.youtube.com/embed/5JxhlxRc9U4" width="560"></iframe></p>

Please can anyone advise me how it can be resolved so that Youtube resizes appropriately?

Many thanks

Tony

You would need something like Zen Colorbox with the iframe code to load the video in, but it's still in bata and not ready yet. I'm finding there an issue with the frame not resizing when I think it should... haven't had time to figure it out just yet.

The code for the video loads into an lightbox iframe which can size depending on the screen size or tilt. The needed code is not that hard to add to the existing download if the video is all your after.

The link on the page would be something like this;

echo '<a class="youtube" href="http://www.youtube.com/embed/jYa1eI1hpDE?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>';

With the script added to the autoload_default.php file

$(".youtube").colorbox({iframe:true, 
<?php echo 
'innerWidth:' . ZEN_COLORBOX_INITIAL_WIDTH . 
',innerHeight:' . ZEN_COLORBOX_INITIAL_HEIGHT .
',opacity:' . ZEN_COLORBOX_OVERLAY_OPACITY .
',speed:' . ZEN_COLORBOX_RESIZE_DURATION .
',overlayClose:' . ZEN_COLORBOX_CLOSE_OVERLAY; ?>
});