How to Fix Content Wider Than Screen Issue

Sometimes a singel page ends up to be bigger than the Screen. Google will penalty that kind of pages as not mobile friendly and from the user site its a glitsch to that result in a bad experience.
These kind of page bigger than screen can happen if you change content or a client extend an existing site-on longer pages it can be a hasle to find the ement that hang over the page boarder.
Here a little neet CSS that helps to identify the block or element in seconds. Just add one of the lines in the developer console on the page

body { margin: 30px; }
/* Optional: Add some margin to the body to add space and
see where your offending elements cross the line */

body * { border: 1px solid red; }
/* add a border to all other elements on the page */

body * { outline: 1px solid red; }
/* Alternate: add an outline to all elements on the page. Won’t effect box model */

MLT mltframework install for OSX

A short overview how to install MLT on a Mac OSX since most hints are for Linux user and the path is not that simple for a non Linux User its a work in progress with a long way to debug the missing GTK . Without GTK we will not get any Text over the Videos as all other modules will fail to render Text.  These is a long journey to compile MLT and all needed packages on a OSX 10.6 with brew . I have to mention here that iam a total Unix nop and mostly i log the process here to repeat the same on a second framework or other versions. Why i document all steps and possible errors in that details ? At the moment i run my dev MAC on Snow Leopard the same procedure  i will need to repeat on upgrade to El Captain and hopefully this blog post helps a bit. Additional quote new in compiling software so its a learning procedure log. Pleas keep in mind iam just a beginner with compiling software so probably they are better ways.

What is MLT ? 

An open source multimedia framework, designed and developed for television broadcasting. For Processing Video Effect a very open plugin architecture make it easy to extend it . Probably the most powerful Multimedia Framework you can find with a very aktive Developer ! Kdenlive is only a GUI. All video processing is done by MLT. Recommended if you want to learn MLT is Shotcast APP a guy interface for MLT from the same developer.

Tell the User Stories

Need the MLT with ffmpeg to use for some movie generation via php . The first MLT install was quite smooth except that i don’t care to much about some missing libys and additional sound libs what result in a fail of text rendering on video. MLT Framework compiled from Source.

FFMpeg and IMAGEemagick was installed already and working on the MAMP environment using 10.6 Snow Leopard xcode  X11: 2.3.6 => /usr/X11

In my case i use Homebrew for most packages , the mltframeworks describe how to process with macports what i don’t want to install again . First of all check that your brew is updated and correct working. Keep in mind that some make prozess take very long  ! Best place to start was the kdenlive help page  even it was for linux.

Why Homebrew installs into /usr/local  ? Because its easy and save.

 Packages updated keep all fresh

Fix all errors you can find. Thats sound easy but will be the most important part. If the brew upgrade process fail or get stuck just execute one by one formula by brew update

brew update &  brew upgrade

brew doctor

Check the needed dependencies for MLT , below a list with marked Ok for brew formulas and NoP for none. UPDATE brew now offer a MLT formula but with no config option and default is with -disable-gtk  what means no text overlay 🙁

The Simple way with brew

brew install mlt

brew config : ./configure –prefix=/usr/local/Cellar/mlt/0.9.6 –disable-jackrack –disable-swfdec –disable-gtk

The downside it will install MLT without GTK so no text over video rendering engine. even if you change the config flags gtk it will not compile without some errors. But a good starting point to experiment with MLT.

If something runs wrong

brew install --verbose --debug mlt

Required packages for a Linux install, since the devel Dev versions are not available in a OSX we need compile them from source.To compile anything on OS X, you’ll need to have XCode .
Installing X11 : In OS X 10.8 Mountain Lion and later, X11 is not provided anymore. You need to install XQuartz, from http://xquartz.macosforge.org/landing/. In earlier version of OS X, this is not stricly necessary, but recommended as XQuartz is more robust and updated that the system-provided X11.
In our case GTK and Cairo can compiled with X11 or without ,default is without that will brake our build for MLT.One big problem compiling MLT with GTK was that it get the wrong libs. To force the build process to use our own gtk+ we place the PATH for GTK before the X11 PATH in our private_Bash ,Like below. How to compile gtk+ with the dev packages is excellent explained in Building GTK-OSX this was the only source who describe how to compile gtk -dev what is needed for MLT with GTK on OSX.  Mac OSX (Snow Leopard in this case) already ships with many libs  (or a own version of it). Brew will install this as keg-only to use it in your build you have to set the the CXXFLAGS LDFLAGS in your make file.

LDFLAGS

CXXFLAGS

export PKG_CONFIG_PATH=/usr/local/gtk/inst/lib/pkgconfig:/usr/X11/lib/pkgconfig/:/usr/X11/lib/pkgconfig/

Following Libs needet for compiling MLT on Linux :

libxml2 libsdl libsdl-image libavdevice (installed with ffmpeg) libswscale libvorbis libsamplerate frei0r (Built from source) libdv libavformat libquicktime           

KDNlive installing MLT

Highly recommended Audio Packages -dev builds are needed for compiling (Linux) libsox-dev libjack-dev ladspa-sdk

Tools for building MLT needed:  cmake , git ,subversion , pkg-config ,autoconf  default install dir for packages will be  /usr/local/include/

MLT GTK+ Install problems

It seems that many people have the same problem here and here  if you are not a soft pro. This post brought me to the right path general GTK+ problems read more about troubleshooting GTK 

missing symbols when gtk is built with Quartz backend

Installing required Libraries  brew  Modules Formulars :

If the package installer fails you can try to install every package one by one.

Cairo 

Cairo is a 2D graphics library with support for multiple output devices. Currently supported output targets include the X Window System (via both Xlib and XCB), Quartz, Win32, image buffers, PostScript, PDF, and SVG file output. Experimental backends include OpenGL, BeOS, OS/2, and DirectFB.  Cairo formula

brew install cairo

frei0r : Filter modul , install frei0r

brew install frei0r

Pango : Internationalized text layout and rendering library Install Pango

brew install pango

GTK2 Why is this package not being found ?

GTK+ : This was quite the  hardest nuts, MLT never found the gtk2 package respond after config with . Important remove any trace of fink and macport reported by brew doctor else it will brake your build since its a  jhbuild  Mixing Fink or MacPorts and GTK-OSX will fail.

Configuring modules/gtk2:
- GTK2 components not found: disabling

What is GTK ? Gtk is a unix graphical framework originally designed to run on Unix systems with X-Windows but it provides multiple backends including one for OS X’s Quartz graphics engine, so it can be built to run on OS X without enabling the X11 subsystem.

tray install GTK 2.0 first with  brew but still the development devels are missing

brew install gtk+

Debugging GTK2

In my case gtk2 never get recognsied by MLT ./config .

1. Check the config Flags for GTK, the first gives the option to link the libs, the second the paths; I usually use something like

pkg-config gtk+-2.0 --libs
pkg-config gtk+-2.0 --cflags

To debug the installer you can add following into the gdk build configure script  located in the melt0.8.9/src/modules/gtk2 . add the debugger for pkg-config around line 24 where it chose to brake your GTK . It will output all the single steps and paths to make it easy to find the bottle neck.

pkg-config $pkgconfig_prefix gtk+-2.0 --debug

FLAGS output

Package libpng16 was not found in the pkg-config search path.
Perhaps you should add the directory containing `libpng16.pc’
to the PKG_CONFIG_PATH environment variable
Package ‘libpng16’, required by ‘gdk-pixbuf-2.0’, not found

 

Libexif  :EXIF parsing library

brew install libexif

QT : Install

install QT important need some quite long time 120 min

brew install qt

SOX  SoX – Sound eXchange apply various effects and convert sound formats. Sound Modules

Install Sox

brew install sox

 

swfdecFlash  modul no brew formula  last update 2008 version 0.8 SWFDEC is also as binary available see FAQ . Mltframework have a own fork swfdec  2012  install swfdec

git clone git://anongit.freedesktop.org/swfdec/swfdec

cd swfdec

MoveIT :

openGL Filters    Release Movit 1.1.3.         2015 by Steinar H. Gunderson . Meanwhile in the Galaxy

git clone “http://git.sesse.net/movit/”

Install Ffmpeg with MAX options

MLT Config Option

To understand the MLT build script its build with jhbuild . Since we need the full developer envoirment for GTK we build our own GTK build for OSX   this guranti us that we have a mostly complete GTK developer Enable GPL is needed to activate all GPL modules   –enable-gpl . Check the MLT Dependencies 

Prefix MLT  –prefix=/usr

Additional we can add prefix for our GTK2 –prefix

Compile and Install MLT for Mac OSX

Thats the most easy part at least on the first run …

git clone git://github.com/mltframework/mlt.git
cd mlt

./configure --prefix=/usr --enable-gpl

 

Terminal out

Configuring framework:
Configuring modules:
Configuring modules/avformat:
Configuring modules/core:
Configuring modules/decklink:
Configuring modules/feeds:
Configuring modules/frei0r:
Configuring modules/gtk2:
- GTK2 components not found: disabling
Configuring modules/jackrack:
- ladspa not found; disabling
Configuring modules/kdenlive:
Configuring modules/linsys:
- does not build on OS X or Windows: disabling
Configuring modules/lumas:
Configuring modules/motion_est:
Configuring modules/normalize:
Configuring modules/oldfilm:
Configuring modules/opengl:
- movit not found: disabling
Configuring modules/plus:
Configuring modules/plusgpl:
Configuring modules/qt:
- Libexif found, enabling auto rotate
- Qt version 4.x detected
./configure: line 183: kde4-config: command not found
- fftw found, enabling lightshow
Configuring modules/resample:
Configuring modules/rtaudio:
Configuring modules/sdl:
Configuring modules/sox:
Configuring modules/swfdec:
- swfdec not found: disabling
Configuring modules/vid.stab:
- vid.stab not found: disabling
Configuring modules/videostab:
Configuring modules/vmfx:
Configuring modules/xine:
Configuring modules/xml:
Configuring mlt++:
Configuring swig:
GPLv2 license used; GPLv3 components disabled

GTK+ options:   –gtk2-prefix=path

make clean
make -j3
sudo make install

Get All Config Flags for MLT   ./configure –help

version: melt 0.9.7

 

After Recompiling GTK+ we get following output . GTK found but all packages installed with brew are now missing . Suggesting some PATH is missing in $PKG_CONFIG_PATH

./configure --prefix=/usr --enable-gpl

Configuring framework:
Configuring modules:
Configuring modules/avformat:
- libavformat not found: disabling
Configuring modules/core:
Configuring modules/decklink:
Configuring modules/feeds:
Configuring modules/frei0r:
Package frei0r was not found in the pkg-config search path.
Perhaps you should add the directory containing `frei0r.pc'
to the PKG_CONFIG_PATH environment variable
No package 'frei0r' found
Configuring modules/gtk2:
- Libexif not found, disabling exif features (auto rotate)
Configuring modules/jackrack:
- jackrack not found: disabling
- ladspa not found; disabling
Configuring modules/kdenlive:
Configuring modules/linsys:
- does not build on OS X or Windows: disabling
Configuring modules/lumas:
Configuring modules/motion_est:
Configuring modules/normalize:
Configuring modules/oldfilm:
Configuring modules/opengl:
- movit not found: disabling
Configuring modules/plus:
- fftw not found: disable fft and dance filters
Configuring modules/plusgpl:
Configuring modules/qt:
- Libexif not found, disabling exif features (auto rotate)
- Qt not found - disabling
./configure: line 183: kde4-config: command not found
- fftw not found: disabling lightshow filter
Configuring modules/resample:
- libsamplerate not found: disabling
Configuring modules/rtaudio:
Configuring modules/sdl:
Configuring modules/sox:
- sox not found: disabling
Configuring modules/swfdec:
- swfdec not found: disabling
Configuring modules/vid.stab:
- vid.stab not found: disabling
Configuring modules/videostab:
Configuring modules/vmfx:
Configuring modules/xine:
Configuring modules/xml:
Configuring mlt++:
Configuring swig:
GPLv2 license used; GPLv3 components disabled
echo $PKG_CONFIG_PATH
/usr/X11/lib/pkgconfig/:/usr/X11/lib/pkgconfig/

POST in Progress 

Video Editing with Scripts

And finaly got it GTK to work

What was the problem ? many libraries not linked since there was a version on the system. with the terminal command we debugg every single lib gtk is complaining and force a link . We needed a force link for cairo ,pixman ,fontconfig ,libpng   for Freetype with

–overwrite freetype

pkg-config --libs --cflags gtk+-2.0

 

Recent Config

./configure --prefix=/usr --enable-gpl

Configuring framework:
Configuring modules:
Configuring modules/avformat:
Configuring modules/core:
Configuring modules/decklink:
Configuring modules/feeds:
Configuring modules/frei0r:
Configuring modules/gtk2:
- Libexif found, enabling auto rotate
Configuring modules/jackrack:
Configuring modules/kdenlive:
Configuring modules/lumas:
Configuring modules/oldfilm:
Configuring modules/opengl:
- movit not found: disabling
Configuring modules/plus:
Configuring modules/rtaudio:
Configuring modules/sdl:
Configuring modules/sox:
Configuring modules/swfdec:
- swfdec not found: disabling
Configuring modules/vmfx:
Configuring modules/xml:
Configuring mlt++:
Configuring swig:
LGPLv2.1 license used; GPL components disabled

Now we can recompile MLT with all the sweet features that it offer . Probably thats not the clearest path but it works now .

Problems Errors that can cross your path :

pango producer, which is related to GTK and
only working, if gtk2 was compiled into MLT ! No text is rendering on video , probably Pango Composer . missing  GTK+ Libs

OpenSSL ≥ 0.9.8  Errors : SnowLeopard and earlier ship with 0.9.7, so if you’re on one of those old platforms you’ll need to upgrade

Perhaps you should add the directory containing `XYZ’
to the PKG_CONFIG_PATH environment variable

Failed to use the precompiled GTK Framework for X11  .

  1. Download the GTK_2.18.5-X11.pkg package from http://r.research.att.com/ and install it
  2. Add to your .profile file in the home directory

Command to edit your .Profile
touch ~/.bash_profile; open ~/.bash_profile

export PATH=/Library/Frameworks/GTK+.framework/Resources/bin:$PATH

Brew Doctor complains : “Having additional scripts in your path can confuse software installed via
Homebrew if the config script overrides a system or Homebrew provided
script of the same name. We found the following “config” scripts:”

Check your installed Moduls

Query MLT : melt -query config

Terminal MLT Errors

After installed the new FFPEG you need to recompile MLT if you get following dylib error

mlt_repository_init: failed to dlopen /usr/lib/mlt/libmltavformat.dylib
  (dlopen(/usr/lib/mlt/libmltavformat.dylib, 2): Library not loaded: /usr/local/opt/ffmpeg/lib/libavcodec.54.92.100.dylib
  Referenced from: /usr/lib/mlt/libmltavformat.dylib

HOMEBREW help

Check homebrew log files cd

~/Library/Logs/Homebrew/

MLT USEFUL COMMANDS

-filter videostab2

Best resources

MLTframeworks

MLT config Script

kdenlive

MediaLibs MLT + flags

GTK OSX Building Gnome

Mac Terminal Command cheat list

How do I specify LDFLAGS and CPPFLAGS for ./configure?

Other Related Open Source Video Software :

Shotdetect :Shotdetect is a free software (LGPL) which detects shots and scenes from a video. The result produced is a simple XML file containing all the informations about the movie generated. How to install  shotdetect

Userfull Terminal Commands for debugging

Add path to pkconfig

$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig

Check if pkgconfig packets are where they should

$ pkg-config --libs --cflags gtk+-2.0

Chrome Disable Same-Origin Policy in Chrome

For Developing local the same Origin Policy from Chrome can disturb the development process . Changing some Chrome Flags help to work on your local host without that error

Flags

–allow-file-access-from-files

–disable-web-security

With disabled Flags you can make Ajax request to other domains for testing keep in mind Chrome is running in insecure mode . Alternative you can make a second Shortcut for chrome to load your Developer version with that Flags disabled.

For MAC  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –allow-file-access-from-files –disable-web-security