HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Problem with embedding YouTube videos in version 2.1

Every since I upgraded to version 2.1, Youtube videos no longer embed correctly. Previously they would be fully there, with title bar at the top and controls at the bottom, waiting to be clicked to start. Now they only appear as a picture, and, if I'm lucky, a start arrow in the middle to just distinguish it from a photo. No title bar or lower controls. If I then click this once, the space goes blank then the video screen is fully loaded, title bar and controls appear, then it has to be clicked again to start the video.

As before, the URL is just pasted into the comment form.

Anyone have any idea what could be causing this?

Or is this somehow intended behaviour? I notice in the style.css there is a section that I don't fully understand that may have something to do with it, titled:

/* Embedded Video Preview Hide/Reveal */



  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2014

    Actually that is how html5 videos embed. It is not the full video embedded in an embed code. It is an html5 replica of the video and if your browser supports html5 that is how it plays other wise you need to embed the flash version ...

    You can also opt out of the html5 version with google I believe...


  • sudden156sudden156 ✭✭
    edited June 2014

    Oh, really, I didn't realise. Although they embedded okay last week on v, so that's a bit confusing, as I haven't otherwise changed anything.

    I'm not actually talking about using any kind of embed code, just the straight URL pasted in as normal. So I'm presuming it's a change in v2.1 and wondering if I can alter that. I notice pasting a youtube URL and previewing here on this forum has the same effect.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    It has to do with google and if you opted in for getting html5 at some point. If you use the video link like this it embeds html5 video

    htt p://www.youtube.com/watch?v=y_leHGTm55Y

    if you use the link they give as in

    htt p://youtu.be/y_leHGTm55Y

    or you get the old embed code

    <iframe width="560" height="315" src="//www.youtube.com/embed/y_leHGTm55Y" frameborder="0" allowfullscreen></iframe>

    The way the video is served varies. Also varies your browser settings and whatever google wants to do. It is not Vanilla the culprit. One has always been able to embed with the link alone. But the way it is served is another story.If the browser does not support html5 or the codec they serve then it defaults to flash and maybe that is why you see what you see. by the way this is an awesome vid


  • But unless Google has changed it this very week, which it could have I guess, then the change seems to be in v2.1. It certainly seems like a step backwards as you can no longer tell what the video is about from the title without first clicking it, then you have to click it again to play it.

    I have certainly seen embedded videos today on other sites that have title and controls, and I don't believe I have opted in to their HTML5 programme.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2014

    I do get the controls when I click the arrow, I embed by posting the link and the image like above posts then when you click the arrow the video player with controls shows.


    If you right click the video on the control bar you will see a popup with info about the player and html5

  • I think it must be to do with v 2.1, because in style.css the overlay arrow is linked to:


    Previously the title and controls showed because they came from Youtube.

  • sudden156sudden156 ✭✭
    edited June 2014

    I reckon that if the following code is removed they will embed properly:

    /* Embedded Video Preview Hide/Reveal */
    .Video.YouTube .VideoPlayer {
    display: none;
    .Video.YouTube .VideoPreview {
    cursor: pointer;
    position: relative;
    display: inline-block;
    .Video.YouTube .VideoPreview:after {
    background: url('https://images.v-cdn.net/youtube-overlay-button.png') 0 -44px no-repeat transparent;
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -22px;
    height: 44px;
    width: 60px;
    .Video.YouTube .VideoPreview:hover:after {
    background-position: 0 0;

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You can add any button you want. Have you tried using Mediator plugin? Maybe that would help you.

    html5 video is different than flash embed video. It has a Preview image instead of the full video until you click to load it.

  • I tried removing that code, it just gets rid of the arrow.

    So is v2.1 set up for html5 video?

    I certainly don't like only getting a preview image. Is that just to save loading time or something?

    I'll have a look at Mediator, thanks.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    No that is all simply css style for the preview image not affecting the loading of the video.

    The video is served by Youtube. The toggle to start serving the video and load the player is the red arrow. This was all experimental stuff by google 6 months ago at least but they could have made it the default I am not sure. But I have no problem seeing the video after clicking the arrow in 2.1 and the controls show fine too.

  • Oh I realise it plays alright when you click it twice, I just think it's a shame that the title bar in particular is absent in a mere preview image, because you just don't know what the video is. That to me is bad design.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes unfortunately but it is to speed up the streaming and to introduce new standards for internet content streaming. So they say... seems faster to me maybe because you don't see it load... I think the info is displayed in a tooltip or it should, but that is not Vanilla fault :smiley:

    The user will have to post what it is about I guess... Maybe you should file a report with google. Even the links on the player to report a bug don't work lmao...

  • Well at least I understand what's going on now! Blasted HTML5!

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Well you can always replace the preview image using css and put a control bar instead of the button. But the info and title that would have to be retrieved if it exists in the meta for the video.

  • Yet I still don't understand how v manages to avoid HTML5 if it is solely to do with Google. It must be a choice in v2.1, no? Just curious if it can be changed so v2.1 serves Youtube like the previous version.

  • @vrijvlinder said:
    Well you can always replace the preview image using css and put a control bar instead of the button. But the info and title that would have to be retrieved if it exists in the meta for the video.

    I could if I was good enough! Probably easier to get used to the ways of HTML5.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2014

    2.1 does not serve anything it only points to the video through a link that was posted and clicking the link loads a player. just like if you post an mp3 link using PlayMyMp3 plugin . You tube serves it and depending on your browser and settings that is what will be served by youtube.

    The only way to by pass this is to use the old embed code. The whole reason html5 video was invented to replace.

    Try embedding using the embed code or iframe code and you will have your old fashioned style player. manages to avoid HTML5 if it is solely to do with Google

    I am not even sure they are related because I saw the same thing in 2.0 . Only when I used embed code do I see the player and not the preview.

    EDIT: It appears that even my embedded videos have been replaced with preview images ????

    looks like it is the default now :(

  • I just tried the embed code from YouTube, with the iframe. That doesn't work at all any more.

  • Good old Vimeo, they still embed perfectly.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    yes it works but it is replaced by preview image

    I had this embedded since a year ago this is the code in the editor when I hit edit and I see the normal player but at post it looks like the preview image... arg!

    <object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/6AaXjgvj2Ts?version=3&amp;hl=en_US"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/6AaXjgvj2Ts?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></object>

Sign In or Register to comment.