insightgraphics

[insightgraphics]

YES! That works! You ROCK!
Thank you so much for helping me with this even though it involves an external plugin.

(Just FYI, I’m sure it was working sometime before Nov 11, because I wrote that into my Nov. 11 report, though I’m not sure exactly which batch of updates turned it off — maybe sometime prior to Nov. 11, or after — because I’m not sure if I tested that little functionality with each update.)

Happy Holidays!

[insightgraphics]

Mystery solved!
The issue is not your theme at all, but a bug in the Revolution Slider that they promise to fix in the next update.

Oddly, YouTube videos won’t play if:
(1) Slider Revolution plugin is activated,
AND (2) a WordPress (default) search widget is visible on the same page with the YouTube video.

This is why it seemed “worse” in Denali than in Twenty Fifteen — because I had the WP search widget in the footer of your theme (constantly visible and constantly adding to the conflict, no matter what device or orientation) while the default Twenty Fifteen theme moved the search widget off the page, into the hamburger off-screen menu, in all mobile views except for the iPad horizontal view. So with Denali + footer search widget, videos didn’t play in ALL iOS views, but in Twenty Fifteen the bug only happened in iPad Horizontal view because the WP search widget was in the sidebar; but in smaller screen views the search widget moved off under the Hamburger menu.

This is probably why you couldn’t reproduce the bug — I’ll bet you didn’t have a search widget on the same page with the YouTube video.

Solution:
ThemePunch (Slider Revolution) offers this temporary fix while they work on the permanent fix:

open the public/assets/css/settings.css and search for: 

.rev-scroll-btn > *:hover,
.rev-scroll-btn > *:focus,
.rev-scroll-btn > *:active,
.rev-scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

and replace it with:

.rev-scroll-btn > *:hover,
.rev-scroll-btn > *:focus,
/*.rev-scroll-btn > *:active,*/
.rev-scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

Just commenting out that one line of css fixes it!

[insightgraphics]

Just discovered another clue:

In the Twenty Fifteen theme, with the Slider plugin, the YouTube videos ONLY do not play on the iPad when it is held in Landscape (wide) view. They DO play when the iPad is in Portrait (tall) view — but you have to reload the page. And they DO play on the iPhone, whether it is held horizontally or vertically.

But with the Denali theme, when the Revolution Slider is activated, YouTube videos do not play at all on iOS, not on iPhone or iPad, not tall or wide.

So the plugin’s problem is ONLY with the iPad held horizontally.
But the theme’s problem is with ALL iOS devices, when the plugin is activated.

Could there be a simple css @media query fix?

[insightgraphics]

Thank you very much for your prompt response and your test — it helped me figure out where to look.

It’s a conflict with the Slider Revolution plugin, which is worsened with the Denali theme.
— with the Denali theme, YouTube videos do not play on BOTH iPhone and iPad (both on latest iOS 9.0.2)
— without Denali theme, on TwentyFifteen, YouTube videos DO play on iPhone, but they still do not play on iPad.

Test site 1: http://insightgraphicdesign.net/test/slidertest/youtube-test
— Twenty Fifteen theme
With Revolution Slider plugin activated, YouTube works on iPhone, does not play on iPad.
Simply deactivating the plugin makes YouTube videos play fine on both devices. (No actual sliders were made.)

Test site 2: http://insightgraphicdesign.net/test/denali0/
— Denali theme + theme’s plugins (issue persists even with theme’s plugins off)
With Revolution Slider plugin activated, YouTube does not work on iPhone or iPad. Simply deactivating Revolution Slider makes YouTube videos play fine on both devices.

Both Test sites:
— Clean install WP 4.3.1
— Revolution Slider 5.0.9
— no added plugins or themes
— testing iPhone and iPad — both on latest iOS 9.0.2

I’ve put a ticket in to ThemePunch, and I’ll post any answers they find, but maybe you can help figure it out? Or figure out some workaround for me to keep my slider and my YouTube videos?

[insightgraphics]

Just FYI, demo data imported fine for me, but it did kick out a long list of failures.

[insightgraphics]

Thanks for sticking with me, and for your great suggestions. I have learned a LOT from your detailed documentation and from reading discussions like this, so I thought I’d share what I worked out, in case it’s useful to anyone else.

I have decided to keep the thumbnail sizes as set by the theme, but to keep them from enlarging on small screens, so they’ll just behave the way they do on the large monitor — except I shrink them even more as the viewport shrinks so the text continues to flow around them. I’d rather have the thumbnail get smaller and stay crisp than get larger and lose quality.

(I can always add the lightbox to important images so a visitor can get the large, hi-res image right there with a tap. Also, the single-post has the full-size image, so a small thumbnail on the post-list is sufficient on a small device.)

The css I added is below. I’m using max-width rather than width so it works on tall, thin thumbnails as well as short, wide ones. (The numbers can be adjusted to taste, depending on the size of the text):

@media (max-width: 480px) {
	.attachment-small {
		float: left;
		margin: 0 15px 3px 0;
		max-width: 60%;
	}
}

[insightgraphics]

Sorry I didn’t explain this well. The featured image I uploaded is 800px wide. I guess WordPress or the Theme makes a 195px-wide thumbnail to use if I select “small thumbnail” in the Post List options? (I did not upload a 195px image.)

I want my site to work like your demo and use the 800px-wide image as the source for the small thumbnail, AND then use that same 800px-wide image as the source for the full-column-width image when the post list is adapted to a 480px-wide viewport. Your demo can have small thumbnails on a post list AND nice hi-res versions of the same images in the other responsive formats: 480px and large monitors.

I want my 800px-wide image shrunk to fit wherever it goes: the 195px thumbnail for a post list AND the full-column width when the post list is adapted to the 480px viewport (AND the full size for the desktop). I can see on your demo that it sources the original-size image for both the small thumbnail and the full-column image, so how can I do it this way, too?

[insightgraphics]

Thanks! Works for me, too.

[Author]

Replies