Get rid of black borders in Youtube videos

Posted in: Newspaper
Post count: 15

Hello,
I tried to get rid of black borders in Youtube videos on the top and bottom (approx. 10 px each). Therefore I changed the aspect ration from 0.6 to 0.5625 in the tagdiv_theme.js:
> td_video.css(‘height’, td_video_width * 0.5625, ‘important’);

Doesn´t work, you can see it here:
http://www.iphone-fan.de/displayschutz-fluessigglas-iphone-glaz/

Any other ideas to get rid of those ugly borders?
Thanks
Dirk

Post count: 22421

Hi,
Actually changing that value in the js file works as expected, but do note that if you use speedbooster (and you do), you will have to modify the min js file not the main one. (It will not be an easy task as the code is compressed/compiled) https://en.wikipedia.org/wiki/Minification_(programming)
I hope this helps.
Thanks.

Post count: 15

Hi Bogdan,
thanks for your advice. I used the dean.edwards.name/packer/ to compile the min js file. But now the functions “Mega Menu” and the “Next Prev Ajax-Pagination” on my homepage won´t work any more. Do you have an advice which compiler to use instead to keep those functions working?
Thanks
Dirk

Post count: 22421

Hi,

You can make your changes to the theme.js file then use Google Closure Compiler tool to minify the modified file of theme.js file and replace with newly minified version into the theme.min.js file.
https://closure-compiler.appspot.com/home
Hope this helps!

Thanks

Post count: 15

Thanks Bogdan,
I used the Google Closure Compiler. It worked, everthing is fine now.
Only one more thing: The YouTube videos are not responsive any more. I use the iframe-Code from YT with 640px width for the desktop version. The videos won´t scale on mobiles now. Any ideas?
Thanks
Dirk

Post count: 22421

Hi,
Something must have gone wrong with the compiling or there is a plugin conflict that affects the video. Please try to disable speedbooster and make the modification in the main ks file and check for responsiveness again. On my end this worked in the main js file and it did not lose responsiveness.
Let us know how it goes.
Thanks.

Post count: 15

Hi Bogdan,
I did as you recommended. With the new compiled tagdiv_theme_min.js the YoutTube-videos are responsive again. But: The Google Closure Compiler gave me 6 Warnings. Is there a `+´ missing in the file?:

JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 1238 character 0
“use strict”;
^
JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 2481 character 1
;’use strict’;
^
JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 4102 character 0
“use strict”;
^
JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 5732 character 0
“use strict”;
^
JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 6470 character 0
“use strict”;
^
JSC_USELESS_CODE: Suspicious code. Is there a missing ‘+’ on the previous line? at line 8860 character 0
“use strict”;
^

Post count: 22421

Hello,
I have checked this issue myself and I still get the same errors even without the modifications, so I think it’s safe to simply ignore them and check if everything works fine.
Thank you!

Post count: 34

I needed to fix this too– it works if I override the height code but I’m unsure if that’s linked to any other modules that may look off after I do so. I do not use the speed booster plugin. What would be the best way to get rid of the borders?

Post count: 34

In custom CSS I put:
iframe#td_youtube_player { height: 620px !important; }

Which works for featured video

But I’m afraid if there are any other calculated heights this will break it.

Post count: 22421

Hi,
The code should work fine and not affect any other parts of the website as it’s specific enough not to.
It’s safe to use it.
Thanks.

Post count: 34

Hi Bogdan,

I really think the javascript calcs need to change, because even the smaller video units have those black stripes on top and bottom. The ratio is off.

It should be H/W: 1 to .5625

1280×720
853×480
640×360
560×315

Post count: 22421

Hi,
Well you can try the method from the replies above: http://screencast.com/t/MNxvmeXdgwXq
You can change these values and set them to your preference.
Thank you!

Viewing 13 posts - 1 through 13 (of 13 total)
The forum ‘Newspaper’ is closed to new topics and replies.