If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
  • #18501

    Hi Guys,

    I’m having trouble with self hosted videos in Shoutbox, I wonder if you can help?

    Usually I just link out to a file on Vimeo or YouTube, but for a new site I want to create it would be better to self host the videos. But it seems to be more complex than I originally thought looking at this post on Angular by Nick:

    http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out) -working

    Basically I have three questions/problems:

    1. File Types

    Why is it necessary to have mp4, webm, and ogv (or f4v) and a jpeg file for each video?

    I’m assuming its a device or browser issue. So the next question is –

    2. Selecting the File Type

    If I make a link to a video using the Add featured media box, it only allows me to choose one file as the embedded video. So how/why do the other file types ever get activated? Sorry if these are dumb questions, but all this is completely new to me.

    3. Troubleshooting

    I set up a test post with a featured image as the keyframe for the linked hosted video (an mp4 hosted in a “films” folder in the “Uploads” folder of WordPress. In that folder I have put all the test videos from the Angular post that Nick wrote (mp4, webm, ogv and jpeg) and also added the MIME file types into my htaccess file.

    When I viewed the post I had the following errors appear above it:

    Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

    Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

    Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

    Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

    Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

    Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes

    However, clicking the video did make it play. The only thing is that the video was positioned top left in the screen which I assume is because the video dimensions (480x270px) are too small for the player window (about 620x400px).

    I haven’t made the post visible for obvious reasons, but you can get to it here:


    So basically I need to know

    – How to set up the video archive correctly (one folder for each video with the four file types inside?)

    – How do I use the jpeg file as the keyframe (or is it just a question of linking to it through the media library?)

    – How do I get the right video file to play if I can only select one file?

    – How do I fix the errors that appeared?

    Thanks in advance!



    1) Not all browsers support all video formats – thus you need to upload mp4, ogv and a jpeg. mp4 is supported by IE, Safari, Opera and Chrome (afaik Chrome devs plan to switch to another format). Firefox doesn’t support mp4 but only ogv. mp4 is required for flash fallbacks (older browsers) too. webm isn’t required but if you want to be on the save side also upload it. The jpeg is required for the preview image (eg if the video doesn’t autostart, etc. – you can skip it too if you don’t want to display a preview image).

    2) Just upload all files with the same file name but different extension. I.e. if you’ve a video called starwars.mp4 upload an ogv version with the name starwars.ogv, a webm video called starwars.webm and a jpg called starwars.jpg – the avia framework should take care of the files and it will recognize that it’s the same file based on the file names. You need to add all files to the “featured media” slideshow though. If the user hits the play button on the front end the browser will request the supported video type from your server.

    3) Ask your hoster to set the allow_url_fopen to 1 (i.e. in the php.ini) – see http://php.net/manual/en/filesystem.configuration.php


    Hi Peter!

    Thanks for your response, I’ll try all those things later today.

    So basically I need to create a featured media slideshow for the three video types, using the jpeg as the featured image? I set the rotation to “off” I guess?

    One last thing about video dimensions: If the video player in the page is say 620x348px, but I want it to be able to play a higher quality video at an expanded (full screen) size of say 1280x720px, how do I set that up so it plays the larger file if selected?

    Thank you!



    Hi Peter,

    I did the fixes that you suggested:

    – Added allow_url_fopen=1 into the php.ini file

    – added the four files (mp4, webm, ogv and jpeg) into the featured media slideshow

    The video now plays in the player and is scaled to the right size for it, BUT the video controls are not showing whereas the slideshow controls are – which I obviously don’t want. How do I fix that? And then resolve the fullscreen question previously?





    That’s actually pretty good, did a good job. I see all the videos in the code for the first time. The problem with the overlay I had myself a few times. No idea why it goes crazy like that sometimes. But once it gets fixed up for the first time, it never goes out of line again. I am looking at your site now. Give me a few minutes, but you on the right track……..

    ** It’s a bad idea to have an activated cache plugin while developing because half the time you are looking at the cache and never know if your css is wrong or its still the cache. **

    Alright. Lets make the cover look proper with this css though there is so much css working on that thing i hope it gets through the blocade

    .mejs-poster.mejs-layer {
    width: 640px !important;
    height: 360px !important;

    There is also something complaining about not understanding MIME for a webfont. So why dont you download htaccess editor plugin and paste the block below at the very top of the .htaccess file (you can use ftp also.

    # Proper MIME type for all files

    # JavaScript
    # Normalize to standard type (it's sniffed in IE anyways)
    # tools.ietf.org/html/rfc4329#section-7.2
    AddType application/javascript js jsonp
    AddType application/json json

    # Audio
    AddType audio/mp4 m4a f4a f4b
    AddType audio/ogg oga ogg

    # Video
    AddType video/mp4 mp4 m4v f4v f4p
    AddType video/ogg ogv
    AddType video/webm webm
    AddType video/x-flv flv

    # SVG
    # Required for svg webfonts on iPad
    # twitter.com/FontSquirrel/status/14855840545
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz

    # Webfonts
    AddType application/vnd.ms-fontobject eot
    AddType application/x-font-ttf ttf ttc
    AddType application/x-font-woff woff
    AddType font/opentype otf

    # Assorted types
    AddType application/octet-stream safariextz
    AddType application/x-chrome-extension crx
    AddType application/x-opera-extension oex
    AddType application/x-shockwave-flash swf
    AddType application/x-web-app-manifest+json webapp
    AddType application/x-xpinstall xpi
    AddType application/xml rss atom xml rdf
    AddType image/webp webp
    AddType image/x-icon ico
    AddType text/cache-manifest appcache manifest
    AddType text/vtt vtt
    AddType text/x-component htc
    AddType text/x-vcard vcf

    Ok lets do this first and see which way the wind blows.





    I just glanced at your source and noticed something

    <div class=' preloading autoslide_false autoslidedelay__5 slideshow_page_big medium slideshow_container'>
    <ul class='slideshow' style='height: 400px; width: 620px;'>
    <li class='featured featured_container1'>
    <video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_943255629_974567444">
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
    <li class='featured featured_container2'>
    <video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_1855278671_1699939172">
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
    <li class='featured featured_container3'><video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_1550942432_40025619">
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
    <li class='featured featured_container4'><video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_444903948_364385693">
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
    <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>

    Something doesn’t look right here, and its not a missing semicolon.




    Hi Nick,

    I did everything you said up to the second post.

    I added that extra css and pasted in all the MIME file types into the htaccess file. (I emptied all the caches before and after the changes too).

    But the problem with the player controls remains. They are not visible and the slideshow ones are. (Well, they are visible for about 1 second when the page first loads, but then the slideshow kicks in and they are replaced)

    I don’t know what’s wrong in the code you pointed to in your second post. the only thing that looks weird to me is why it says:

    <source src=”http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv” type=”video/ogg”/>

    ie The source file is ogv, yet it calls it ogg in the file type.

    Also it appears to be repeating the same information 4 times. If it registers all four file types in each part (“container”) of the slideshow, why is it necessary to make a slide show with the four in. Do I even need the slideshow?





    Try to add following code to css/custom.css to fix the video controls issue:

    .mejs-container .mejs-controls {
    z-index: 100;




    Hi Peter,

    That helped, now I can see the video controls, but the slideshow controls are still appearing over the top, on the right hand side..

    Is there a way to restyle the video player at all? Does it have other skins or styling options. I was looking for something more minimal.

    Thanks again!




    The ogv/ogg are ok same format one video, one audio and defined in htaccess as

    AddType audio/ogg oga ogg

    AddType video/ogg ogv

    Was weird, I double checked my source https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess and it looks fine.

    i see what you did wrong. I setup your files locally and all works well. 1) do not add each movie and 1 image to 4 different upload areas in Page.

    Upload 3 movies using main media button, copy the http url for the image. (mp4 i always attach), upload the cover and add the url to your mp4 as shown here http://i.imgur.com/5D1lY.png

    Try it please,




    Hi Nick!

    Ok, we are getting closer!

    Now I don’t have the slideshow controls on top, because now there is no slideshow.

    I took out the other three parts of the slideshow I had built, so now there is only one featured video (the mp4). I thought this was the right way to do it initially, but Peter specifically said: “You need to add all files to the “featured media” slideshow though.” So I interpreted that as make one slide for each video. Maybe he didn’t mean that!

    Ok, so now the video plays and the video controls are there. Well, all except one. There seems to be a bug with the full screen button. It only appears at the very start of the video. Once the video plays you can’t select it.

    Another thing about the fullscreen is that the video plays tiny in the centre. Now, I don’t know if this is because the video player doesn’t scale, or it’s because there is a problem. I know your test videos are pretty small, but when the player is normal size, the video does seem to get scaled up to fit that size, so I think something isn’t right. I also noticed that if the video is stopped in fullscreen, the large play button that appears over the image doesn’t work. You can only reactivate the video with the small play button at the bottom.

    I also have problems uploading a featured image as a URL. I think someone else mentioned this a while back. The theme (or WP) doesn’t accept it and the image thumbnail defaults to the film can icon all the time. I would have to upload that keyframe into the media library, it’s the only way I can get it to work.

    Which video player does the theme use? Is it mediaelement? I may want to try and customise the interface later. I can look inside the player folder and see what I can change. I really hate the fullscreen warning thing that appears, for example…

    Anyway that is tweaking for later.

    Thanks so much for all your help Nick


    PS. Your htaccess file is huge! Do I need all that info in mine?


    Yes, Kriesi uses mediaelements: http://mediaelementjs.com/ – unfortunately I couldn’t find a “minimal” skin for it (I’m not even sure if the player supports several skins like http://flowplayer.org/ or if you can only use the default skin).



    Please check the link above to the image i posted ( http://i.imgur.com/5D1lY.png ). The top arrow points to where you can control video size, though I never looked how big the video gets.

    The image explains also where to add the -overlay-image and where to add the LINK to the mp4 file. Repeat everything that is shown in the image please.




    Hi Nick,

    Everything is as you posted in that image. This time I uploaded the overlay image into the library because there is no way to upload it from a URL, because of the problem I posted before.

    The link to the mp4 is correct otherwise thee would be no video at all playing.

    I still have the same problems as above:

    1) Fullscreen button disappears (using Firebug you can see it is actually shifted to below the player)

    2) Fullscreen “Play” overlay button doesn’t work

    3) Video only plays small at fullscreen size

    If you change the slideshow setting form “medium” to “fullscreen” size all it does is stretch the player to a full page width and distort it. It doesn’t affect the size of the video played at fullscreen size.

    If you look at the mediaelements site that Peter posted (http://mediaelementjs.com/ ), you can see how the video player should work. It is running the same test videos, but their fullscreen player has no problems.

    I wonder if there is a bug in the player set up in my version of Shoutbox (v.12)

    A friend of mine said to check out JW Player also. It’s meant to be good.

    Thanks again



    Hi Rich,

    Yeh I saw in the code… the width and height are hardcoded … Lets update that player, see if that will do the trick. Download the latest files please http://www.mediafire.com/file/ohii0ng4bgli343/mediaelement.zip …i put it up there and removed the stuff that’s not needed…. unzip it, it is not a plugin, so will require use of ftp to upload. Just please make sure you back up everything before overwriting!

    In fact just change the name of /js/mediaelement/ directory to mediaelement-2 and then drop the entire mediaelement folder in its place that is within the zip. The version in the zip is 2.10 and hopefully it will make life easier a bit.




    Hi Nick,

    Sorry for the delay – I was away.

    I replaced the mediaelement folder with the one you uploaded and it made no difference at all (and yes, I did clear the caches). The same problems remain PLUS one new one: now the video control bar floats halfway up the video display and is too short. This may be due to the css changes mentioned above – I don’t know.

    I’m using WP 3.4 also, so it’s nothing to do with a bug in 3.5.





    You wrote ‘Nothing happen.’ after you installed the files. Were you looking at the cache by any chance? I still see you are using the W3 Total Cache plugin, even though what that means is that you will be making modifications that will show up next month when the cache is updated. It is independent of the browser cache, so clearing your browser cache will just make the browser get a fresh version of the page from…. the cache created by W3 Total Cache. Please deactivate it during development.

    Please use this css file for mediaelementplayer.css https://github.com/johndyer/mediaelement/blob/master/build/mediaelementplayer.css. I just pasted it into your page and everything fell into place, at least with the css.

    I just tested it locally and I am getting 100% screen size.

    **If you have any custom css from before, lets also remove it, specific to the videos.




    Hi Nick,

    I emptied “all caches”, which is a W3 option, before and after all the changes. I assumed that would make the changes visible. To be perfectly honest I don’t like that plugin anyway, because I don’t understand half the stuff it does. I’d rather get rid of it completely. I think my site is slow because of the image sizes more than anything. Anyway that’s another issue I have to fix later.

    I’ll do what you said above, deactivate W3 and report back later.

    Thanks again!



    Hi Nick,

    I did everything that you said and I’m back to where I was right at the beginning, minus the slideshow problem.

    The video plays, but I have no player controls visible, and from what I can tell the fullscreen is still playing the video at a small size.





    The only problem I have is that there is a second overlay getting in the way from the new code So the first time you click it, the video plays but if you pause it the overlay that looks like a play button pops up in middle of screen and clicking on it results in .5 second of video till it returns again. But videos play 100% size, controls are there. I am gonna do a comparison between the update and the old code and get that re-appearing button to go away.

    Not as easy as I thought.

    I am using 3.5 wordpress. , new jquerry ui, and new media element player. too many factors. I will keep testing and let you know., but as i said, its one of the customizations , probably an absolute/relative somewhere doing this.




    Ok, thanks Nick,

    I very much appreciate all the trouble you are going to.




    Please use these settings. http://i.imgur.com/ae1j8.png

    a) notice the size is ‘medium’

    b) i am not adding the image, only the url to 1 video.

    c) there is no content in top area.

    d) there is no featured image.

    I am using wordpress 3.5

    Please look at second image showing media -> http://i.imgur.com/PIn9R.png

    Notice that the image is attached to the video here. *i attached it directly to the video in the media center* But the three videos are not attached to any post or page.

    Your code looks completely different from what mine is, and did exactly what I wrote here.

    Please email me a login/pw usjahm (aaattt) gmail (ddoott) com , because your settings are not same somewhere.




    Hi Nick,

    I did as you said (or as far as I can work out from that image you sent). But I still have issues.

    I didn’t upload the videos to the Media library. I uploaded them directly to the /wp-content/uploads/films/video-test/ folder on my host using ftp, and I am linking to them directly via a URL. Maybe that is why my code is different.

    I just sent you a username/pasword so you can access my site anyway.





    Now you are updated, wpml is working, whether you use the child theme or no is up to you since thats a lot of custom templates you will have to re-create in the child theme. I am not sure if you want to do that or no. Maybe easier to let sleeping dogs lie. I will try the videos again in the next few days, sorry about the delay.. the holidays and all. :)



Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘Self hosted video problems’ is closed to new replies.