Video embed "iframe" code: How do I alter default pixel-height of Youtube vids?

  • Right now, if I simply paste a raw YouTube URL into the edit window of any new post, without any surrounding or additional “embed” or any other code, that YouTube video will display and play successfully when the post is previewed or published. Which is good. I like that.

    However, what I DON’T like, is that right now, as things currently stand, every single YouTube video, when appearing in one of my posts, displays with a frame that is 600 pixels tall — no matter what the width or ratio was of the original video.

    Now, somewhere in existence there must be code that achieves these two things, one good and one bad:

    – This code causes raw video URLs pasted into my content to display and play successfully, without me having to input any special additional “embed” instructions;

    – This code also causes that displayed video’s frame to always be 600 pixels high.

    Therefore, what I seek is this:

    I want to keep the ability to have raw URLs in my editable content converted automatically into a displayed video; but I want to change the default behavior of the conversion process such that any and all videos are not always 600 pixels high, but are rather either 100% of the actual height, or (if that is not possible), some set height that is somewhere around 400 or 360 pixels high.

    What I don’t know is WHERE THIS CODE EXISTS such that I can access it and change it.

    I thought it might be part of the theme I am using (Weaver II), but that turns out not to be the case – they insist this is part of the general WordPress install. It might involved the term “shortcode.”

    I’m quite sure that if I was pointed in the right direction of the code’s location (i.e. which file it is in), that I would successfully be able to tweak the code to change the default height of videos.

    Remember, I’m not talking about altering the height of videos on a post-by-post or video-by-video basis; I could do that simply by using the “embed” code on any YouTube video’s YouTube page. Instead, I want to change the DEFAULT height of how any and all videos are displayed, as (I assume) determined by whatever it is that causes raw URLS to be converted to displayed video.

    So my question, if it can be summed up in one sentence, is:

    WHERE do I make whatever changes are necessary to change the default height of displayed videos?

Viewing 8 replies - 16 through 23 (of 23 total)

  • Hi again,
    It doesn’t look like the function I gave you is running correctly. When I look at the code on that page, the iframe is wrapped in a <span>, not a <div> as in the code I sent.

    In the page content, does your embedded YouTube link look like this, with no shortcode around it?

    https://www.youtube.com/watch?v=dySwJnQv4gU

    Ack! Sorry, one sec – I didn’t understand how that Functionality plugin works. Let me see if there’s another plugin out there that will do what we need. If not, you’ll need to create a child theme or use the shortcode supplied by Weaver II. More soon…

    Nope, I’m not seeing a way to do what you need via plugins. You’re going to need to create a child theme. Do you have FTP access to your web host?

    Luckily Weaver II has made child themes easy for you – they even supply a sample child theme and instructions here.

    Once you have your child theme created, put the CSS above in your child’s style.css file below the header/import stuff. In the functions.php file, add the function above.

    Upload your new child theme files to your web host. Make sure your child ‘active’ them in Apppearance > Themes.

    @qpqpqp
    Just wanted to point out that premium themes like Weaver II are not supported on this forum. If someone wants to help they certainly can but most often there is no one like Michelle around.

    Make sure you let the Weaver folks know about this problem. The fact that it works in a default theme points to Weaver II. I used that theme for sometime and found their support great.

    Thread Starter qpqpqp

    (@qpqpqp)

    Michelle —

    Ugh. I followed the instructions carefully and was successfully able to create a child theme, but when I changed to make that theme active — all the customizations I had made to my originally chosen Weaver II subtheme disappeared! So I’d have to start all over again from scratch with the customization. Furthermore, even in the new child theme, despite following your instructions to the letter, the video iframe problem still persists. So — I switched back to regular ol’ non-child theme, and all my customizations returned.

    This child theme thing seems like a very convoluted way to solve a very simple problem. For now, it doesn’t seem worth it (especially since changing to the child theme didn’t even solve my problem despite having customized the function file and css file as instructed). I’ll just wait until (and if) the people at Weaver II figure out why the iframe behaves differently by default in Weaver II as opposed to Twenty Twelve (or any other WordPress native theme). I’m still convinced that some minor tweak to a Weaver II file will solve the problem.

    kmessinger –

    Yes, I know I’m lucky to have Michelle around to help. And yes, I am actively asking how to solve this problem in the Weaver II forum. I only came here to ask because they at first insisted that the issue was a WordPress problem, and was not their responsibility. But now I think they are beginning to realize that the issue may indeed reside with Weaver II itself.

    So, I’ll just have to sit tight and wait to see if the Weaver II people can figure out a way to solve this — and if not, I’ll just have to live with having big-framed unplayed YouTube video frames (when posted by un-tech-savvy co-admins who only know how to paste in the raw URL [due to being aged 6 and 92] — the whole reason I’m asking this in the first place).

    Michelle, thanks for all the help, and I free you from any further sense of duty to continue commenting on this thread!

    So sorry it didn’t work qpqpqp! Hopefully this thread will be of use to the people over at Weaver and they’ll be able to get the code updated for you. ??

    Thread Starter qpqpqp

    (@qpqpqp)

    One final question, in case anyone’s still around:

    An admin at the Weaver site asks this question, as part of working on a solution:

    “What variable does WordPress use to set the width of the iframe from a video URL?”

    And my related question: Is there any way to alter this variable?

    I don’t know that it does. The solution I was presenting to you basically followed this tutorial: https://websitesthatdontsuck.com/2011/12/fluid-width-oembed-videos-in-wordpress/.

    In searching for that I also came across this – a plugin which might just make this work for you without editing the theme (haven’t tried it): https://www.ads-software.com/plugins/fluid-video-embeds

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘Video embed "iframe" code: How do I alter default pixel-height of Youtube vids?’ is closed to new replies.