CODEWITHSUNDEEP
phpjavascriptjquerywordpress
Francis Alvin Tan
Francis Alvin Tan

Reputation: 1087

width and height adjustments on only youtube iframes

how to make adjustments on width and height for all youtube embeds only, because there are some iframes that is used and mostly are youtubes

<iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/xbGv2T456dfg3">

this codes is embedded in my wordpress post, I want to adjust the width and height for only youtube iframes and not all iframes, I can adjust manually but when it comes to many videos then it will be long to do.

for example * all youtube iframes will be 560x316 * and all other iframes will be its default dimension.

can it be done in php? sorry Im new

Upvotes: 0

Views: 1996

Answers (3)

3dgoo
3dgoo

Reputation: 15794

You could try css attribute selectors to choose iframes with youtube.com in the src attribute:

iframe[src*="youtube.com"], 
iframe[src*="youtu.be"] {
    width: 560px !important;
    height: 316px !important;
}

Upvotes: 2

Francis Alvin Tan
Francis Alvin Tan

Reputation: 1087

thanks guys for the help

I just gave jquery a shot and it worked

    $(document).ready(function(){
    $('iframe[src*="youtube.com"]').css({"width":"560px","height":"316px"});
    });

Upvotes: 0

cpilko
cpilko

Reputation: 11852

You could create a new filter on the_content in your theme's functions PHP that calls a function that searches for and replaces Youtube iframes like this:

function my_youtube_resizer($content) {
   $dom=new DOMDocument();
   $dom->loadHTML($content);
   $iframess = $dom->getElementsByTagName("iframe");       
   foreach ($iframes as $iframe) {
     $src = $iframe->getAttribute('src');
     if (strpos('youtube.com', $src)) {  //You may have to also deal with the short URL youtu.be
        $iframe->setAttribute('width', '560');
        $iframe->setAttribute('height', '316');
     }
   }
   $content = $dom->saveHTML();
   return $content;
 }

If you're using another plugin to create those iframe links (e.g. Jetpack), make sure your filter has a lower priority.

Upvotes: 3

Related Questions