Dynamically Change Width and Height in embed code

In a recent project I was working on we had to allow the client to embed videos within the site. This had to be done using an easy-to-use customized CMS. The thought is that they can take the embed code right off the YouTube site and save it to the DB for use throughout the site.

YouTube’s default dimensions for a video are 480 x 295, but what if you need a different size of video? Obviously we don’t want to have the client fiddling around with the embed code changing the width and height attributes; so this is where I turned to using regular expressions in PHP. Take a look!

Let’s pretend the following source is what we would like to modify and it is stored in a $youtube variable:

$youtube = <<<EOF
<object width="480" height="295">
<param name="movie"
value="http://www.youtube.com/v/Xq-HRHMEmfg&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Xq-HRHMEmfg&hl=en&fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="295"></embed>
</object>
EOF;

Fixing the Problem

How can we change the width and height attributes throughout this code? There are probably numerous ways, but none quite as easy as using regular expressions. If you are unfamiliar with the basics of regular expressions I suggest checking out Regular-Expressions.info.

A PHP function that makes use of regular expressions is “preg_replace”. It allows you to use regular expressions to replace whatever matches. More details on the function can be found at PHP.NET

Creating The Function

We will be creating a function that allows you to resize any mark-up and not just YouTube videos. It will allow you to modify an elements width and height attributes as well as changes any inline styling. Below is what we get:


function resizeMarkup($markup, $dimensions)
{
$w = $dimensions['width'];
$h = $dimensions['height'];

$patterns = array();
$replacements = array();
if( !empty($w) )
{
$patterns[] = '/width="([0-9]+)"/';
$patterns[] = '/width:([0-9]+)/';

$replacements[] = 'width="'.$w.'"';
$replacements[] = 'width:'.$w;
}

if( !empty($h) )
{
$patterns[] = '/height="([0-9]+)"/';
$patterns[] = '/height:([0-9]+)/';

$replacements[] = 'height="'.$h.'"';
$replacements[] = 'height:'.$h;
}

return preg_replace($patterns, $replacements, $markup);
}

The most difficult part of the above to understand is probably the ([0-9]+) part. Let me break it down:

  1. () – wrap the value that we want to replace
  2. [0-9] – any number between and including 0 and 9
  3. + – one or more occurrences

Using the function:

We can then dynamically change the size based on the query string (?width=228&height=178)

$width = intval($_GET['width']);
$height = intval($_GET['height']);

$youtube = resizeMarkup($youtube, array(
'width'=>$width,
'height'=>$height
));
echo $youtube;

Another little feature I should quickly point out is that you don’t have to pass both height and width. For example if you want a div to dynamically change its width but stay a fixed height (YouTube caption), you can do the following:


$width = intval($_GET['width']);

$caption = <<<EOF
<div style="background:#F8EBD7;border:1px solid
444;text-align:center;width:500px;height:50px;">
commandN Episode #170
</div>
EOF;

$caption = resizeMarkup($caption, array(
'width'=>$width
));
echo $caption;

In this case, the div will remain 50px high but its width will be changed by the query string (?width=228)

Conclusion

We now have a re-usable function that allows us to use many different sizes of the same YouTube clip without making the client tinker with any code!

Author: Brenley Dueck

About these ads

38 Comments

  1. Joern said,

    December 21, 2009 at 12:46 pm

    Thank you for this code, it’s working great. Actually I am pulling the _oembed_.. meta value of a post in WordPress 2.9 and use your code in functions.php to resize the html code saved by WordPress in the postmeta table.

  2. Sander said,

    January 22, 2010 at 3:57 pm

    Thanks man, really usefull.

  3. JamesDX said,

    February 15, 2010 at 9:03 am

    Anyone know how to do things like this?

    • Chandra Sekar Vinod Kumar said,

      February 15, 2010 at 10:15 am

      could u plz explain what u want?

  4. sajjadul said,

    March 6, 2010 at 5:18 am

    Thanks for this. I am using this into this theme for fixing embedded flash video’s size. A demo here:

    http://coderfrombd.com/security_wp/

  5. October 16, 2010 at 12:18 pm

    […] hat mich schon gestört und daher habe ich das Plugin einfach umgechrieben. Dank dem Code war es gar nicht mal so schwer Tweet Tags: oembed, oEmbed for Comments, plugin, […]

  6. Rod said,

    December 26, 2010 at 8:30 pm

    Doesn’t work for me … what a pity :/ it seem’s i’m a lonely case.

  7. January 2, 2011 at 4:02 pm

    […] Dynamically Change Width and Height in embed code August 2009 5 comments […]

  8. mark said,

    January 7, 2011 at 4:19 am

    super script….

  9. Amr said,

    April 18, 2011 at 11:21 am

    Thank you very much for this great and very useful function. It works great.

  10. July 22, 2011 at 2:05 pm

    thanks a lot for this, really helpful.

  11. Ranganath said,

    July 27, 2011 at 6:20 am

    Thanks for the code. This is what I was looking for. Works great.

  12. alaa ebrahim said,

    September 8, 2011 at 1:28 pm

    Thx alot its working Well :)
    i had the same code but i had an error that i didnt identified the variable as an array
    thx again.

  13. manisha said,

    December 21, 2011 at 10:25 am

    thanks,i ahve done this…

  14. ranmaru moriz said,

    July 2, 2012 at 5:59 am

    thanks, really useful

  15. July 13, 2012 at 6:20 am

    What’s up, constantly i used to check weblog posts here in the early hours in the daylight, for the reason that i love to gain knowledge of more and more.

  16. November 6, 2012 at 8:48 am

    excellent issues altogether, you just gained a new reader.
    What would you recommend about your put up that you made some days ago?
    Any certain?

  17. December 1, 2012 at 7:41 am

    I am extremely impressed together with your writing talents as neatly as with the structure to your weblog.
    Is this a paid theme or did you customize it yourself? Anyway
    keep up the excellent high quality writing, it’s rare to peer a great blog like this one nowadays..

  18. Vaibhav Gade said,

    March 21, 2013 at 9:20 pm

    thanks so much

  19. Jennie said,

    March 31, 2013 at 9:52 am

    Pretty component of content. I just discovered your weblog plus accession capital to convey that we acquire the truth is enjoyed account your weblog posts.
    In any manner Let me be subscribing with your augment or even I fulfillment
    you get right of use of constantly fast.

  20. coupons said,

    April 8, 2013 at 8:21 am

    Hello There. I found your blog using msn. This is an
    extremely well written article. I will be sure to bookmark it and come back to read more
    of your useful info. Thanks for the post. I’ll certainly return.

  21. Van said,

    April 12, 2013 at 11:47 pm

    I am truly thankful to the owner of this web site who has
    shared this great post at here.

  22. April 14, 2013 at 4:22 am

    Thank you for any other informative web site. Where else
    may I am getting that type of information written in
    such a perfect approach? I’ve a venture that I am just now running on, and I’ve been at the look
    out for such info.

  23. April 17, 2013 at 3:15 am

    excellent issues altogether, you simply received a emblem new reader.
    What would you recommend about your put up that you made some days
    ago? Any positive?

  24. mocknets.com said,

    May 1, 2013 at 9:35 pm

    There’s definately a lot to know about this topic. I like all of the points you’ve made.

  25. May 6, 2013 at 11:48 am

    After looking over a handful of the blog articles on your site, I seriously
    appreciate your technique of writing a blog. I bookmarked
    it to my bookmark site list and will be checking back in the
    near future. Please visit my web site too and tell me how you feel.

  26. May 11, 2013 at 1:55 am

    Hey there! This is my 1st comment here so I just wanted to give a quick shout out and tell you
    I genuinely enjoy reading your blog posts. Can you suggest any other blogs/websites/forums that deal
    with the same topics? Thanks for your time!

  27. Dominik said,

    May 11, 2013 at 2:44 pm

    I’m impressed, I must say. Rarely do I come across a blog that’s both equally educative
    and amusing, and let me tell you, you’ve hit the nail on the head. The issue is something which not enough people are speaking intelligently about. I am very happy I found this during my hunt for something concerning this.

  28. May 13, 2013 at 12:03 am

    Hello to all, how is all, I think every one is getting more from this web site, and
    your views are good for new users.

  29. Ramiro said,

    May 15, 2013 at 1:30 am

    Excellent post. I was checking continuously this blog and
    I’m impressed! Extremely useful info specifically the last part :) I care for such info much. I was looking for this particular information for a very long time. Thank you and good luck.

  30. jackpot 6000 said,

    May 30, 2013 at 3:31 am

    Appreciation to my father who stated to me regarding this webpage, this blog is really remarkable.

  31. June 11, 2013 at 8:57 pm

    Please let me know if you’re looking for a writer for your weblog. You have some really good articles and I believe I would be a good asset. If you ever want to take some of the load off, I’d really like to
    write some material for your blog in exchange for a link
    back to mine. Please send me an email if interested.
    Thanks!

  32. Norberto said,

    June 19, 2013 at 12:01 pm

    Nice respond in return of this issue with genuine arguments and telling all about that.

  33. July 10, 2013 at 3:57 pm

    Excellent post. I was checking constantly this blog and I’m impressed! Extremely useful information particularly the last part :) I care for such info much. I was looking for this certain info for a very long time. Thank you and good luck.

  34. July 20, 2013 at 10:49 pm

    Hello There. I found your blog using msn. This is an extremely well written article.
    I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely return.

  35. July 21, 2013 at 10:38 am

    A person necessarily help to make severely posts I might state.
    That is the first time I frequented your web page and to this point?

    I surprised with the analysis you made to make this
    particular publish extraordinary. Wonderful task!

  36. Caleb said,

    July 22, 2013 at 9:04 am

    Hello there! I know this is somewhat off
    topic but I was wondering which blog platform are you using for this site?
    I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

  37. July 27, 2013 at 6:07 am

    I am now not sure where you’re getting your information, but good topic. I must spend a while studying much more or figuring out more. Thank you for great info I was looking for this info for my mission.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: