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

  • qpqpqp

    (@qpqpqp)


    10 years, 2 months ago

    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 15 replies - 1 through 15 (of 23 total)
1 2
  • Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    I should add that I looked at the WordPress Support Page for videos (http://en.support.wordpress.com/videos/youtube/), and no mention is made of how to change the default height of how raw-URL-pasted-in YouTube videos are displayed.

    I also should mention that I have JetPack installed — don’t know of that’s relevant.

    Denis B

    (@fortisthemes)

    10 years, 2 months ago

    Try this.

    [embed width="500" height="400"]http://www.youtube.com/youryoutuberl[/embed]

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    Fortisthemes:

    Please read my question. I say this:

    “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.”

    Your suggestion is the exact thing I said I wasn’t looking for.

    To repeat: I’m trying to figure out how to change the default height of how videos are displayed. I want to change some underlying code once, and thenceforth all videos would display correctly, rather than incorrectly as they currently do.

    Doesn’t anybody else have this problem? When you paste a raw YouTube URL into your post, doesn’t the resulting video display with an overly-tall 600 pixel height?

    FriendlyWP

    (@mmcginnis)

    10 years, 2 months ago

    This is something in your theme. It’s not setting the video height to “auto” which is causing the height to be distorted.

    You could either let the theme developers know and ask that they add “height:auto;” to the embed, iframe, object, and video elements, or you can create a child theme and add them yourself if you don’t want to wait.

    You’d need to add this to your child theme’s style.css file:

    embed, iframe, object, video {
  height: auto;
}
    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    Michelle —

    I just spent two days in discussions with the theme’s authors, and they absolutely insist that this issue is caused by WordPress itself, and has nothing whatsoever to do with their theme’s underlying code. I asked the question here because I could get no answer on the forum for the theme (Weaver II) itself!

    Now I don’t know what to do.

    FriendlyWP

    (@mmcginnis)

    10 years, 2 months ago

    Do you have FTP access to your site? If so, I recommend trying the child theme thing. It’s easier than it sounds & I’m happy to walk you through it.

    FriendlyWP

    (@mmcginnis)

    10 years, 2 months ago

    Thought of an even easier solution: add a plugin like this one and then add the CSS above to see if it works. You may need to add !important after the rule like this:

    embed, iframe, object, video {
  height: auto !important;
}

    If that does work, you can go back to the theme developer with proof. If not, we can keep working on it. 🙂

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    Michelle —

    Thanks. You are being very helpful.

    I just tried the “Simple Custom CSS” suggestion from your most recent comment, and input the exact code you cited.

    It “worked” — too well!

    Now the video displays in a thin stripe, maybe 150 pixels tall! And thus most of the video is not visible.

    (And I’m not talking about a specific video – -I’m taling about all YouTube videos in general. I chose a random one that was the standard 640 wide x 360 high.)

    But at least we’re getting somewhere. At least I was able to affect the problem. How can I tweak the code you gave to make the video display with its existing ratio/dimensions?

    kmessinger

    (@kmessinger)

    10 years, 2 months ago

    When you paste a raw YouTube URL into your post, doesn’t the resulting video display with an overly-tall 600 pixel height?

    No.

    http://test.savethecolors.com/ as an example using the default theme. The size comes from the css for the player.

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    kmessinger –

    Well, then, do you know of what code I could try pasting into the “Simple Custom CSS” plugin which would fix/override the problem that occurs for me? The sample code from Michelle made the video display very small for some reason. is there some way to explicitly specify “100%” as the height and width in the CSS?

    FriendlyWP

    (@mmcginnis)

    10 years, 2 months ago

    Okay, I’ve tested this with the Weaver II theme and it’s working for me.

    You will need to add a function as well as new CSS. Truly the ideal way to do this is via a child theme (see link above) so if it works for you I’d consider switching to that method, but here’s how to do it using the Custom CSS plugin and another plugin called Functionality.

    1. Install Functionality and activate it.
    2. Go to Plugins > Edit Functions and add this code at the end, then click Update File:

    // VIDEO
// remove dimensions from oEmbed videos
add_filter( 'embed_oembed_html', 'tdd_oembed_filter', 10, 4 ) ;
function tdd_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-container">'.$html.'</div>';
    return $return;
}

    3. Go to Appearance > Custom CSS and add the following, then click ‘Update Custom CSS’:

    .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	width:100%;
	overflow: hidden;
	margin-bottom:1.677em;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

    That should make all the embedded videos fit and resize correctly on differently sized screens.

    (FWIW the reason you need the function as well as the CSS is to strip out the hard-coded height in the embedded video, so that the CSS can take over and do it’s job correctly.)

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    Michelle —

    Wow — it works! Almost, that is.

    I followed the exact steps you suggested (installed Simple Custom CSS plugin, installed Functionality plugin, then pasted in the exact code you gave for each into each one), and then saved all changes, and then checked to see how the video displayed.

    Result? When the unplayed static video frame first appears on the screen in my post, the video is still way too tall — however, now when the video is clicked on and starts playing, it shazam! shrinks down to the correct dimensions! And then when it is paused, it stays at the correct dimensions. But when I refresh the page and the video goes back to the beginning and is still yet unplayed — it’s back to the same old too-tall big dimensions. Hmmmmm.

    So once again, we’re getting closer and closer to the solution. Now my problem is slightly different:

    When a YouTube video first appears unplayed in a new post, how do I make it display with the correct dimensions (as it will do when the video is clicked on and starts to play).

    Your genius suggestions have gotten me 80% of the way there!

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    OK, I have taken screenshots to illustrate what I’m talking about.

    All of these screenshots were taken just now, with the new “Functionality” and “Simple Custom CSS” code you suggested in place and activated.

    Here is how the video (just a random sample video I have chosen) displays on the original YouTube page itself:

    http://www.annelirufus.com/unworthyblog/wp-content/uploads/2014/02/vid_youtube_original.jpg

    As you can see, it is the standard 640 pixel wide x 360 pixels high.

    When I paste that video’s raw YouTube URL into a WordPress post (with Weaver II theme activated), and then “Preview” how it will look, when the video first appears as-yet unplayed in the post, it looks like this:

    http://www.annelirufus.com/unworthyblog/wp-content/uploads/2014/02/vid_weaver_unplayed.jpg

    As you can see, now the frame is really tall, unnecessarily, with large black bars above and below the video image itself. This is what I’m trying to get rid of and fix.

    But when I click on the video to start playing it, the frame size instantly shrinks down to the correct dimensions/ratio, as you can see in this final screenshot:

    http://www.annelirufus.com/unworthyblog/wp-content/uploads/2014/02/vid_weaver_playing.jpg

    Isn’t that strange? How do I make the unplayed video frame be “normal” size?

    FriendlyWP

    (@mmcginnis)

    10 years, 2 months ago

    Do you mind posting a link to the video on your site? I’m not able to replicate that bug in my installation.

    Also, what browser(s) and OS’s have you checked this in? I’ve tried in FF, Chrome and IE on PC and it works for me in all of those.

    (BTW I’m about to jump away from the computer for some errands but will check back when I can. 🙂 )

    Thread Starter qpqpqp

    (@qpqpqp)

    10 years, 2 months ago

    Michelle —

    OK, I posted the sample video as a “Page” here:

    http://www.annelirufus.com/unworthyblog/?page_id=245

    (I had to do it as a “Page” rather than a “Post” because this is a live blog and I can’t just be posting random videos as my latest post for no reason! But the effect is the same when it is a “Page.”)

    When I click on that link above and go to my new page, I get a screen showing the as-yet-unplayed YouTube video with the too-high frame, as in the second screenshot above. When I click on the video to start playing it, it shrinks down to the correct size, as in the third screenshot.

    Doesn’t this effect happen when viewed on your computer as well?

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