Play button not showing up in full post – only abreviated…

Resolved CaineDorr
(@cainedorr)

11 years, 5 months ago

I’ve changed themes a few times and the last theme, the one I like and have settled on, isn’t showing a play button or progress bar for the mp3 files in full posts (this hasn’t been a problem with any other theme).

The file is clearly there and you can even make it play if you poke around with all the little text based links but the nice (and convenient) play button and progress bar aren’t showing up in full posts with FIREFOX. The play button and progress bar are in fact showing up in abbreviated posts.

This page shows them:
http://maskedmaraudermatinee.com/category/shows/spoken-word/

When I click on a single option, one post – then the graphics are gone:
http://maskedmaraudermatinee.com/modern-pulp/

I see a play button on both full posts and pages with abbreviated posts on GOOGLE CHROME as well as in IE. The graphics are different but I can see the play button everywhere.

http://wordpress.org/extend/plugins/podpress/

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author ntm
(@ntm)

11 years, 5 months ago
Thank you for the diligent report.

This issue is related to a Javascript library which is part of the theme (Pinboard) you use. This library file is called fitvids.js and the script helps to adjust the appearance of videos which are may embed in your posts.

This script wraps by default to all <embed> and <object> HTML elements in certain container elements (like in all <div> elements with class .entry-attachment or .entry-content) with an additional <div> element (<div class="fluid-width-video-wrapper">...</div>) and adjusts the size of the <embed> or <object> element. Together with the CSS of this additional element it disturbs the appearance of the podPress player.

At the moment there is probably no way to resolve this without editing the code of two of the files of your theme.

Adjust to lines in the file functions.php of your theme. Modify line 839 and 855 (bot are equal) like this:
old:
```
$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe, object, embed"});
```
new:
```
$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe"});
```
(It is not necessary to define <object> and <embed> as custom selectors for the fitVids.js script because it uses them already as default selectors.)

Furthermore edit the default selectors of the fitvids.js script. This file is in the sub folder /scripts of your theme. Edit lines 53 and 54:
old:
```
"object",
"embed"
```
new:
```
"object:not(object[id^='podPressPlayerSpace'])",
"embed:not(embed[id^='podPressPlayerSpace'])"
```
(The new lines make the script select only <object> and <embed> element which have not an id which starts with the phrase podPressPlayerSpace. I see no way to add these exceptions via the custom selectors of fitVids.)

These modifications will only affect the podPress elements.

Note: it is likely that you need to repeat these adjustments after each theme update.

Tim
Plugin Author ntm
(@ntm)

11 years, 5 months ago
On a second thought:
it is also possible to get a comparable solution by editing only the functions.php file (lines 839, 855):
old:
```
$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe"});
```
new:
```
$(".entry-attachment > :not([id^='podPressPlayerSpace']), .entry-content > :not([id^='podPressPlayerSpace'])").fitVids({ customSelector: "iframe"});
```
The new line means: that the fitVids script should be used for object, embed and iframe elements which are in container elements with the class .entry-attachment or .entry-content which do not contain elements with IDs which start with the phrase podPressPlayerSpace.
This method is not as precise as the method which I mentioned in the last posts. Because his method here excludes the whole post and not only certain embed and object elements from the fitVids script. If you would use this method and would add non-podPress videos to posts with podPress elements then the fitVids script would not resize these non-podPress videos.

Tim
Thread Starter CaineDorr
(@cainedorr)

11 years, 5 months ago

Thank you so much for responding. I really appreciate it.

I’m not sure I fully understand your instructions so that I can execute your instructions properly. Firstly i have no idea on how to make the lines in the code file show up with numbers along the left side (I’ve seen this elsewhere but I can’t make it work). I simply counted and used CNT F in a text file and this is what I found:

$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe, object, embed"});

which is different from what you showed me here which is this (like above):

$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe"});

I figured they were close enough so I changed them utilizing the second set of instructions you provided above but there doesn’t seem to be any difference in the site at all. So I don’t know if maybe I didn’t execute your instructions properly or what.

Additional help, if you have the time to provide it, would be greatly appreciated. Thank You.

Caine
Plugin Author ntm
(@ntm)

11 years, 5 months ago
You are right. You should search for
```
$(".entry-attachment, .entry-content").fitVids({ customSelector: "iframe, object, embed"});
```
in the functions.php. You will find this line of code two times in that file (in line 839 and 855) and you need to modify both in the same way. (If you modify only the first line you find then you will see only under certain conditions a change.)
The modified lines should look like:
```
$(".entry-attachment > :not([id^='podPressPlayerSpace']), .entry-content > :not([id^='podPressPlayerSpace'])").fitVids({ customSelector: "iframe"});
```
Please, check your modification (and complete them if necessary) and tell if this method does not work despite all efforts. We will figure something else.

Tim
Thread Starter CaineDorr
(@cainedorr)

11 years, 5 months ago

Thank you again.
I did as you asked but it didn’t work.
Plugin Author ntm
(@ntm)

11 years, 5 months ago
You are right. I have made a mistake. I’m sorry. The modified lines in the functions.php file should look like this:
```
$(".entry-attachment > :not(.podPress_content), .entry-content > :not(.podPress_content)").fitVids({ customSelector: "iframe"});
```
(This means that the fitVids script will not work in HTML elements with the class name .entry-attachment which contain at least one element with the class .podPress_content.)
Thread Starter CaineDorr
(@cainedorr)

11 years, 5 months ago

That took care of the problem brutha thank you so very much. I really appreciate it!
miette49
(@miette49)

11 years, 4 months ago
Hiya,

FYI the same conflict occurs with the “Path” theme from ThemeHybrid (problem in FF only). Just a note that to resolve there, I’ve removed the fitvids code from lines 261-263 of Path’s functions.php, as I don’t use video (sorry if anyone stumbles upon this thread looking for a better resolution. I’m only competent enough to muscle through these problems when they affect me). Perhaps someone else does. Here’s what I removed:
```
/* Enqueue FitVids */
		wp_enqueue_script( 'path-fitvids', trailingslashit( get_template_directory_uri() ) . 'js/fitvids/jquery.fitvids.js', array( 'jquery' ), '20120625', true );
		wp_enqueue_script( 'path-fitvids-settings', trailingslashit( get_template_directory_uri() ) . 'js/fitvids/fitvids.js', array( 'path-fitvids' ), '20120625', true );
```
Plugin Author ntm
(@ntm)

11 years, 4 months ago
@miette49:
Removing these two lines will affect the resizing of videos through out the whole blog. It disables the fitVids functionality completely. This helps of course with the problem of the podPress player. But it affects all other functionality too.

A better solution for that particular theme (Path) would be to edit the file /wp-content/themes/path/js/fitvids/fitvids.js like this:
old:
```
// Basic FitVids
jQuery(document).ready(function() {
    		jQuery('#content').fitVids();
    	});
```
new:
```
// Basic FitVids
jQuery(document).ready(function() {
    		jQuery('.entry-summary > :not(.podPress_content)').fitVids();
    	});
```
This will disable the fitvids functionality only in posts with podPress elements.
miette49
(@miette49)

11 years, 4 months ago

@ntm

This worked perfectly. Thank you so much.

— Miette

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Play button not showing up in full post – only abreviated…’ is closed to new replies.

Tags