Only playlist problem and responsive doubt

Dear urkekg,
I’ve changed the code, and here is the result: https://www.casagrandeandrea.com/wordpress/?page_id=791

I still see old content (single video from playlist in table, not embedded playlist). Do you maybe have active WP/W3TC/CloudFlare cache?

I have to admit I don’t know what you are talking about. How can I check it?
Maybe could help if I create a temporary admin account for you and you try to access the backend to check?

Ok, send me credentials through contract form

Done, let me know if you have received it!

Hi Andy,

Here what I found. Your theme clash with fitVids from YouTube Channel, and hardcode video size to full content width.

Here is JavaScript that mess with responsive fitVids: https://www.casagrandeandrea.com/wordpress/wp-content/themes/surfarama/library/js/scripts.js?ver=1.0.0

Workaround w/o tweaking that JS code to exclude videos inside YouTube Channel is to add this to custom style.css:

.youtube_channel.responsive .ytc_video_container .fluid-width-video-wrapper iframe {
  width: 100%!important;
  height: 100%!important;
}

So, when you do this, simply change only_pl to 1 and responsive to 1 in shortcodes, and you’ll get what you wish.

Cheers,
Urke

Dear Urkekg,
thanks for your help!

I’ll try to apply this today, not sure if I know how to do that but I will find the way.

It is not the first time that this theme makes me mad with the plugins I’m using, I’m having problems with the Instagram plugin too… So I’m thinking of using another one, even if I liked that ??

Just one question: if I make the changes you said but in future I decide to change the theme, will everything work anyway, or will I have to change back to the original file version?

Thanks again for your assistance!

You’ll made that small CSS (or JavaScript) tweak in current theme, nothing in YTC files. So fix is only for current theme.

If/when you switch to other theme, you probably will not need these fixes ??

Dear Urkekg,
sorry to bother you again, but it seems the plugin is having new behaviours after the latest updates. Look at the image attached: the upper videos, that was the only one working good at the time I had the problem of the videos in tables, now is thin and wide on the screen. Nervertheless, I have written the shortcode to use iframe2, but it still seems to use thumbnail, I’ve tried to hide the player controls but they are always on, and so on.

https://drive.google.com/file/d/0B8DKY1rVM0fPZzBTbUhNMWljemc/view?usp=sharing

I wanted to ask you another thing: I’ve found a voice class=”test” in the shortcode after your visit. What was it for?

By the way, now the CSS of the theme has the lines of code you have written to me, I hope I have done it in the right way.

Hi Andy,

Well, instead of CSS I sent in comment https://www.ads-software.com/support/topic/only-playlist-problem-and-responsive-doubt?replies=25#post-6908520

.youtube_channel.responsive .ytc_video_container .fluid-width-video-wrapper iframe {
  width: 100%!important;
  height: 100%!important;
}

you have

.youtube_channel.responsive, .ytc_video_container, .fluid-width-video-wrapper, iframe {
  width: 100%!important;
  height: 100%!important;
}

So, remove commas between classnames.

Then, I see as a visitor message “Oops, something went wrong”, and tip:

Check YouTube Data API Key restrictions, empty cache if enabled by appending in browser address bar parameter ?ytc_force_recache=1

https://goo.gl/cj5zlS

I don’t know why commas appeared :O
I’ll try to fix everything and let you know thanks!

Andrea

Dear urkekg,
I’ve done what you said, removing the commas from the CSS, as you can see from the following image:
https://drive.google.com/file/d/0B8DKY1rVM0fPMjRXMHFEUHRIWWM/view?usp=sharing

but surprisingly the page has not changed, and if I look at the code it seems that it still sees the commas:
https://drive.google.com/file/d/0B8DKY1rVM0fPRGo2dlFpR3kyWlk/view?usp=sharing

I tryed clearing browser, caches and so on, but nothing changed. So I tryed another experiment, removing “height: 100%!important;” and here is what happens:
https://drive.google.com/file/d/0B8DKY1rVM0fPVGt1VzRBMENxMHM/view?usp=sharing

So, if I fix the main video, I get the table videos wrong. On the other hand, if we obtain to get the table videos work, then the main video is bugged… ??

Hi Andy,

I know this will sound lame, but did you Aggiorna file (Saved Changes) after you removed commas from CSS? ??

If you had, then check do you have some cache plugin on website, maybe server cache or CDN/CloudFlare?

Btw, I see CSS change in file https://www.casagrandeandrea.com/wordpress/wp-content/themes/surfarama/style.css (try with different browser or Incognito mode in chrome?)

hi again,
as you saw I have saved changes after removing the commas.

If I use “iframe2” instead of “iframe” inside the shortcode, do I have to change the “iframe” in your CSS code to “iframe2” too?

Anyway, I have looked to other classes in the css, and they DO use the commas to separate various classes with same attributes. What does it change to put commas or not? Sorry to be so ignorant, but I’ve done CSS only at school, and I am trying to understand how does it work so I am able to fix the problem without bothering you anymore… ??

https://drive.google.com/file/d/0B8DKY1rVM0fPNVFLUzU2VW1PeVk/view?usp=sharing

Hi Andy,

Do not change iframe to iframe2 in CSS. That “iframe” is HTML tag name, not option in plugin (option can be named even ‘async’ or ‘abc123’ but HTML tag will stay ‘frame’ for CSS ??

Next, classes are separated in CSS if you have to use same attributes for various class names, (lie upper example in your screenshot).

On the other side, you don’t put commas if you increase targeting precision. For example:

<div class="parent_1">
  <div class="child_1"></div>
  <div class="child_2"></div>
</div>
<div class="parent_2">
  <div class="child_1"></div>
  <div class="child_2"></div>
</div>

you can target .child_1 and .child_2 in bot parents with:
.child_1, .child_2 { color: red; }
But, you can say that you wish to .child_1 in .parent_2 have green background, so you add:
.parent_2 .child_2 {background: green; }

Google for some CSS tutorial, it will help you ??
Cheers