Youtube play arrow shows to the right of the still image and causes video disappearance when clicked

rbrahmson

Running Vanilla 2.1.11 VBS3 theme (which is responsive but does not have responsive video support). After installing plugin and testing on Chrome wither on the desktop or on Android Lollipop on Samsung Galaxy Tab S 10" , I noticed that the right pointed triangle in the video still (the one you see before pressing the triangle to play the video) has moved to the right of the still image. Now, if I click the triangle the still image disappears and the video does not play. If instead I click on the still image (without the triangle) the video is played and it is correctly responsive to the wide screen size.

Without the plugin the triangle is in the right place, video plays without a glitch, but it is not responsive (small size video).

Shadowdare

Would you post a screenshot of what it looks like?

rbrahmson

Sure. This one is from the desktop but it's the same on the tablet.

vrijvlinder

Try this, although a link to the example would help more....

.Message span.VideoPreview a img{
width:100%;
}

rbrahmson

@vrijvlinder - in lieu of the plugin? ;-) And if not, shouldn't the plugin do that?;-)
Or perhaps you just wanted me to test something for @Shadowdare ?

Shadowdare

The plugin works fine with the default theme of Vanilla 2.1+ when custom CSS is added to make the width fluid. The theme probably has adjustments that affect the video preview.

vrijvlinder

@rbrahmson said:
in lieu of the plugin? ;-)

In lieu of resolving your issue... this is a css issue and nothing more. It is an easy fix what more do you want?

rbrahmson

@vrijvlinder - thanks for your feedback - I must have been misunderstood - I have no complaints, just thanks for your support. I was asking just because I wanted to know before I tried it. I'm away from my computer right now but I'll report later whether the css solution works. Thanks again and apologies if I sounded aggressive earlier.

rbrahmson

@vrijvlinder and @Shadowdare : OK, I tried the suggested change and here is what happens:

1. The still image with the play button (the triangle) spans the available space. I thought that the problem was solved because the play button is now in the middle of the still image.
2. When I press the play button the large image and play button disappear. Nothing happens.
3. If however I press the image to the left of the play button the video starts.

I uploaded to a Google shared document the before and after screen images as well as a dump of the relevant HTML code and the modified CSS as suggested by @vrijvlinder. (here is the link)

vrijvlinder

A link to your forum where the example is embedded FFS!!!! No pictures , no pastebin crap!!!!!!!!!!!!! we need to see it in a action in a forum get it????

I need to inspect your forum with a web inspector o be able to see what it does...

Why is it that difficult to understand ???

hgtonight

@vrijvlinder said:
A link to your forum where the example is embedded FFS!!!! No pictures , no pastebin crap!!!!!!!!!!!!! we need to see it in a action in a forum get it????

I need to inspect your forum with a web inspector o be able to see what it does...

Why is it that difficult to understand ???

Many projects are not hosted online. I do almost all of my development on a local web-server that doesn't face the internet.

Please be understanding to the unique position a member might be in.

vrijvlinder

@hgtonight said:
Many projects are not hosted online. I do almost all of my development on a local web-server that doesn't face the internet.

Can you view a project from a mobile phone if it is not online? Specifically with a Samsung Galaxy Tab S 10" ? I only have iPhone... maybe by setting up a home network as a local web server . Yes, he probably is not online and there is no way to access his forum and that is why he did not post a link to his forum. Bummer, then it will be near impossible to help him without being able to inspect it....

rbrahmson

Sorry but @hgtonight is right. The forum is closed for confidentiality reasons. There is nothing I can do about it. Accessing it from the tablet is no different then the desktop - both require authentication.

I am willing to live with the non-responsive youtube and instruct users to click on the video to see it directly on YouTube or expand it to full screen (both are available with youtube).

Needless to say, I can live without the responsive videos and I don't need the cold water for offering feedback (my post is categorized as Feedback) on the new plugin that @Shadowdare developed.

vrijvlinder

Regardless my code still stands. all you have to do is look at the code for your video which you could have posted here too ...

Relevant segment from HTML containing YouTube Video

    <div class="Item-BodyWrap">
      <div class="Item-Body">
        <div class="Message">
          <span class="VideoWrap"><span class="Video YouTube" id="youtube-dl14oYU3ItE"><span class="VideoPreview">< a href="url">< img src="url" width="240" height="135" border="0" / >< /a ></span>
          <span class="VideoPlayer"></span>
          </span>
          </span>
        </div>
      </div>
    </div>



.Message span.VideoPreview a img, .Message iframe{
width:100%!important;
height:auto!important;
}

You must find if in your theme or other plugin the images in the posts have a definite value and change that otherwise use the css above. It will work better in the plugin css file than your theme custom.css if it has one.

Shadowdare

Thanks for trying out my plugin, @rbrahmson.

If I get some time soon, I'll download the VBS3 theme and try to diagnose the issue and will comment here with my results.

rbrahmson

Hello @shadowdare, I did some tests of my own. I disabled your plugin and made the change @vrijvlinder suggested before the storm directly in the VBS3 css. That partially worked as the still image was distorted - it was wide as the space allowed, but short as before the change. That gave me an idea - to add a height:75% to the css (creating a 3:4 video space, sacrificing widescreen). Low and behold, that worked just fine, the play button is where it is supposed to be, the video acts as expected, and I'm happy and almost forgot @vrijvlinder;-). It took you and @hgtonight to balance the scales;-)))

All of that worked without your plugin. But I had to make the changes to the theme's CSS which many users would find less convenient that using a plugin that provides compatibility across themes.

So I'm sure you will be able to work it out into your plugin. Just to ensure I'm understood, here are my changes to the VBS3 CSS:

.Message span.VideoPreview a img{  /*PA support responsive Youtube videos */
 width:100%;                          /*PA change suggested by vrijvlinder */
 height:75%                           /*PA add height to create a 3:4 video frame (yea, not exactly widescreen)
}

rbrahmson

Just tried

.Message span.VideoPreview a img, .Message iframe{
width:100%!important;
height:auto!important;
}

Instead of

.Message span.VideoPreview a img{  /*PA change suggested by vrijvlinder */
width:100%;
height:75%                       /*PA create a 3:4 video frame (yea, not exactly wide screen)
}

and the first one has a short height, the second one (75%) works fine...

vrijvlinder

@rbrahmson said:
blabla bla .............So I'm sure you will be able to work it out into your plugin.

No, he should not. Because every theme may have it's own style for sizes of content. And there are other plugins in any case that may. A plugin should be virginal so it can be adapted as needed.

Please understand the meaning of Open Source ... It means you can modify it any way that suits YOU. Not that it should be modified for anyone else.

rbrahmson

Dear @vrijvlinder, you probably misunderstood my intention in this entire post. I understand open source. I already solved my issue. I posted my feedback to @Shadowdare to help HIM with his new plugin. When I wrote that he "should be able to" it was in recognition of his skills, not a demand. This entire thread is under the "Feedback" type. I simply gave feedback.

All the while I am being criticized and patronized by you. Apparently @hgtonight hint wasn't enough.

By now I am almost sure you will have some more hard words for me. You may have the last word as I'm disengaging from this conversation.

vrijvlinder

Not criticizing you, this is feedback , because this is not the first time you try to get people to add your changes into their plugins or apps. If people find your changes to be worth adding to their plugin or app , they will on their own without having to tell them to do so and will likely add your name to the credit for the change. That includes me.

However if the change is minimal or has no real impact on a plugin, it is not worth adding that change unless many people ask for it or if it really needs that change. The whole point of releasing software for free and having people download it , is so they can do whatever they want with. Authors are not obliged to even update their plugins or themes. It is a matter of having time to do it and willingness . But if an author feels they don't need to add a change suggested by a user, you need to accept that and not force people to do something.