@sitbacknl ik denk dat het nu ook is opgelost. Bij deze video’s zaten er twee divs omheen, beide met een padding van 56%. Ik heb het nu zo aangepast dat de plugin checkt voor twee niveau’s ipv 1 niveau. Ik hoor graag of dit het voor je oplost.
Een echte crack dus. Het werkt. Ook de videos onder elkaar. Onwijs bedankt. Fijn weekend.
Groeten
Lars, Sitback
Sorry. De responsiveness is nu niet geheel 100%. Bij kleiner trekken scherm. Sorry. Maandag weer. Ik laat het nu zo staan. Ok dan.
Lars
It would be nice to exchange in English …
The problem in this case is that the responsiveness is handled by adding a padding of 56%. This will push down the blocked content container if there is an image with a fixed height in it.
Instead of giving the image a height, I have now changed it so the image will be given a padding as well.
Will test some more with different setups to see if this resolves the problem.
@sitbacknl @bonaldi The YouTube initialisation preserving correct styling on different themes is a tough one to tackle. After some digging into the several methods that are used for response resizing (which lies at the core of the problems) I think have found a way to do this.
The core problem is a method to get the actual padding. This is quite difficult, as most functions in jquery or javascript just return the calculated pixel size. If the padding is in %, the browser calculates the pixel size, and returns this value. This value is useless if you want to restore a padding in a responsive way. And I need to know if the padding is 56%: this is the padding that is used on responsive video’s. To be absolutely certain this is the video responsive padding, I need to know the value in %.
With some help from stackoverflow and a few adjustments I have found a solution to this.
/**
* Get actual css style from an element
* @param el
* @param property
* @returns {string}
*/
function getActualCSS(el, property) {
var domNode = el[0];
var parent = domNode.parentNode;
if(parent) {
var originalDisplay = parent.style.display;
parent.style.display = 'none';
}
var computedStyles = getComputedStyle(domNode);
var result = computedStyles[property];
if(parent) {
parent.style.display = originalDisplay;
}
return result;
}
I guess this is of no interest to you, but it’s a pretty cool function so I share it anyway 🙂
This value enables me to accurately detect if a padding is used, in which case I apply a padding to the image, or if the container is set with a height, in which case I set the height.
replacing this folder:
https://github.com/rlankhorst/complianz-gdpr/tree/master/core/assets/js
and this file:
https://github.com/rlankhorst/complianz-gdpr/blob/master/complianz-gpdr.php
should update the scripts.
Please let me know if this resolves the problem for you!
If you can confirm this, I will push this as 2.1.6 on Monday.
Hello (@rogierlankhorst),
I hope this won’t spoil your weekend. After your last post of today I downloaded the complete master from github and put it in the plugins directory by FTP. (I hope that’s the way to update). Did this twice. Just to be sure. Because I’m back where we started before. The image of the video won’t show up (see the jazz link) or the video image is placed too low.
The responsiveness is way much better. Sometimes the aspect ratio gets distorted now.
Damn. Like you said. It’s a pain…
I think I will put back 2.1.4. That worked good.
Great work so far. Thank you very much. If you want to let me test new stuff. Just let me know. I can do that almost whole weekend.
Good luck.
Lars
-
This reply was modified 5 years ago by sitbacknl.
-
This reply was modified 5 years ago by sitbacknl.
@sitbacknl don’t worry, this sometimes happens 🙂
I’m glad you are willing to help me out by taking the time to test the changes. I tested the previous version locally on your site, which worked, but after that I made a last change to make it generally applicable, which apparently broke the code, but because of browsercaching I missed this.
I have now committed a version which has successfully been tested on the jazz page with the multiple video’s, and appears to be working well locally. Hope this will work live as well.
Updating the /js and the complianz-gdpr.php files should update all scripts.
Hi Rogier,
I will test on my side for compatibility with Fitvids.
Is it normal for the master zip to go from 2.9mb to 28.9mb?
I see a node_modules folder added.
Regards.
Hello (@rogierlankhorst),
I just installed the complete new master files. And Yes! All works fine now.That is… on my side. Theme looks perfect now. Supurb.Thank you.
That pesky cache. Can’t we do with caching in 2019 with all those fast connections nowadays? How many times I did thing twice just because of caching haha.
have a great weekend.
Hi @sitbacknl That’s great news! Thanks for the testwork!
@bonaldi yes, the node_modules folder was added to get the full gutenberg implementation on board. This way everyone can create his own gutenberg build with npm, if needed.
You don’t need to upload this folder to your site. It it’s only used to build the js files, and is not used in production.
Let me know if this works for your site, thanks for your testwork and patience!
Does not work with Fitvids for me … yet.
I’m going to look at your code to try to understand why.
When I change this in cookieconfig.js it seems to work:
$('.cmplz-video').each(function (i, obj) {
//reset video height adjustments
/*if(!resetPadding) {*/
$(this).height('inherit');
/*}*/
});
This means that when reloading the page, you may need to play with blockedContentContainer
instead of assigning inherit
?