A client is using videojs in their wordpress theme and I am trying to figure out why when I add a poster to the video, the video does not ever 'buffer' or play. It sits there with the 'loading' spinner, but it will never play.
When I remove the poster (thumbnail) from the player, the video plays just fine.
I am using this shortcode in wordpress:
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4", poster="http://moviewriternyu.files.wordpress.com/2013/08/mclovin-license.jpg"]
If I remove the , poster="http://... the video plays just fine.
Has this happened for anyone else?
Answer:
Videojs player does not like commas. , between any of it's inputs. Here's the right way to write it:
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4" poster="http://moviewriternyu.files.wordpress.com/2013/08/mclovin-license.jpg"]
Just removed the , before poster
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4", poster="http://moviewriternyu.files.wordpress.com/2013/08/mclovin-license.jpg"]
You have placed a comma between attributes but it is not allowed. Remove it and play the video.
Related
Trouble with a blurred thumbnail at my website project
Greetings.
Ladies And Gentleman
I ask some question about this picture I've sent, what I want to ask about is how to make
this picture's blurred thumbnail turned into High-Definition.
enter image description here
already try to turn off lazy loading with this code but loading="lazy"
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Website using Wordpress
this is the link https://cloudteamize.com/test-porto/
Increase the size of the thumbnail on the Wordpress settings "Settings > Media" I suggest you put it at least 650px.
You will always see it blurry because is a flexible container and often stretch larger than the actual image size (It varies on viewport size or screen resolution).
pd: You will need to regenerate the thumbnails after or reupload the image and use the latest version. When you change those settings old images don't create the new thumbnail versions automatically.
THE SOLUTION IS FOUNDED:
the problem is the image link that my plugin using called: Portofolio Carousel is adding 350x181.png at the end of the link, I think that make my image use the lower quality.
example:
the original file is -> mmd.png
but in that plugin -> mmd-350x181.png
i take the values of my src then remove the 350x150.png to only .png using my massy javascript like this:
$ = jQuery;
$(document).ready(function() {
const imgs=document.querySelectorAll('#portofolio img');
imgs.forEach(img => console.log(img.removeAttribute('srcset'), img.removeAttribute('loading'),img.src=img.src.replace("-350x181","")));
});
some how if I not doing my code inside console.log, the code didn't run. I think that is really weird, but some how when I try to put that in console.log, it just works so if you can give me suggestions or make this code clearer, that's will be great.
I have a phpBB board that permits uploads of video along with media. I want to modify an existing phpBB extension for Fancybox, that will permit me to mix media types in a Fancybox gallery.
As a first step, I made a simple page that uses Fancybox to mix media types in a gallery:
http://www.59plymouth.net/fancybox/fancybox.html
I want to fix the following issues with it:
I don't want it to autoPlay (although, when I add the autoPlay :
false attribute, it has no effect;
The video controls within the iframe are inaccessible;
I see the Youtube video uses the fancybox-media class, and the controls are accessible - but using the fancybox-media class instead of iframe drops it from my gallery;
The Fancybox frame for the video is much larger than the video
itself - I'd like it to autosize, just as with the images.
Any help? Thanks in advance...
Dan
I have a YouTube video embedded on a page in ModX. To place it, on the Page I switch TinyMCE off to reveal the HTML code then paste the iframe in. That works Ok but when I go back to edit something else in HTML mode the iframe code disappears.
Anyone know whats going on?
TinyMce is encoding some of the characters in your youtube code for you... it honestly thinks it is being helpful ;) . You have 3 options:
Reference the tinymce documentation, there are some options to tell it which characters not to encode. [sorry, don't remember offhand what they are]
turn off "rich text" on the particular resource you are trying to include the video in.
place your video code in a chunk & reference that chunk in your resource instead of the actual code. [probably your best bet]
Ok geeks...
I've got a folder containing images of hundreds of players.
The images are named with the player name:
"John Doe"
"Jane Doe"
I would like to display the player image anytime you hover over the player name text.
Any ideas how I should go about this?
look at tippy plugin
http://croberts.me/projects/wordpress-plugins/tippy-for-wordpress/
Its exactly what your looking for.
for an example see - http://scrobbn.com/cakedogg-and-presentcat/
I found that I had to turn off mobile browsing as the images didn't fit on iphone screen in portrait.
google "viewport wordpress" on how to comment out the code in header.php
I'm sure if you changed the options you could make it work for mobile, but I couldn't be bothered.
Best way to do google if you are starting from scratch. Check the following links, I hope this is what you need-
LINK1
LINK2
LINK3
In Wordpress check files that are responsible for those text display and then render those text according to your requirement as shown in above links.
You could use some CSS skills to do so. Like using tag to the text of the player name. Add a a.hover css to the same text with background image as the corresponding player.
This short post explains how to create an image rollover animation for your Wordpress site in seconds using a plugin. No code necessary.
http://wpvisualslideboxbuilder.com/how-to-create-a-wordpress-slide-box/
I just installed this and it seems to work like a charm except for one thing. When the page displays, the thumbnail is blank. Is there a way I can use the first video frame as the thumbnail display or something like that?
Thanks in advance for any help you can give me.
To have mediaelement.js load a thumbnail you need to ensure that preload is not set to none. For example:
<video src="myvideo.mp4" controls="controls" preload="metadata"></video>
Setting poster="poster.jpg" as per the example in the documentation won't necessarily work (unless you happen to have a file named poster.jpg). Though you can set the poster attribute to the location of an image to use as a thumbnail prior to loading the video, in the event you don't want the user agent to peek inside the media object.
See this answer for more information on the pre-load options - What are the options for the mediaelement player's "preload" setting?
I believe you need to put a poster="poster.jpg" attribute in the <video> tag.