I agree with mapbarker and say TileMill would be the best route. However the problem you have is that the original raster files are in British National grid (epsg:27700) and need to be warped to the google sperical mercator projection (epsg:3857)
The MapBox team have a good tutorial on this - https://www.mapbox.com/tilemill/docs/guides/reprojecting-geotiff/
So all you will have to do is warp your virtual raster, load into TileMill then export out.
The alternative is to use the gdal2tiles.py and then mbutil to load the directory of tiles into the mbtile. This is a painful and very time consuming route.
--EDIT--
Ok to explain further.
You said you had already created your VRT for the rasters using QGIS. So you need to warp the VRT from its current projection to the one required to created MBTiles - as explained in the link above.
Do you have GDAL installed? If not you could install it and then using the link above use the gdal_warp command to convert to the EPSG 3875.
If you dont want to install GDAL then you can use QGIS>Raster(from the top toolbar)>Projections>Warp
Then select your VRT file, then specificy an output to save to
Then select EPSG:27700 as the source SRS and then EPSG:3875 as the target SRS,
Then I would loolk at this previous question - Converting Ordnance Survey raster maps to WGS84 webmap tiles and determine which resampling method you want.
Then let QGIS do it works
Once the warp has finished you will have a new raster file
Load this into TileMill and then export out as an MBTile
It was report to Openlayers issues and closed.
Ensure that you are using Openlayers v4.2+. I was using v3.18 and faced similar issue, once upgraded to v4.3.1, resolved my issue. Follow the steps at here and don't increase the 'maxZoom' value from 14 in this code
var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 14});
Openlayers will manage with tiles of Zoom level 14 to be used at higher zoom levels.
Best Answer
The OSM2VectorTiles link you mentioned offers a download of VECTOR tiles for OpenStreetMap. There are no RASTER .png inside the MBTiles, instead, there are ProtoBuf (PBF) tiles in. This is MBTiles similar to the one generated by MapBox Studio Classic.
If you want raster tiles (PNG/JPEG) for use in OpenLayers or Leaflet, then you need to install a server which turns the vector tiles into raster tiles on demand.
Easiest maybe:
Read the documentation of these tools on how to use them. We at KlokanTech.com have developed these tools to switch from MapQuest and MapBox to our own hosted OpenStreetMaps - and we are releasing it as open-source to anybody. Check our talk at FOSS4G 2016 (late August 2016).
In case you want to use vector tiles directly (the .pbf files) - for example in native mobile apps, MapBox GL JS or OpenLayers (like http://openlayers.org/en/latest/examples/mapbox-vector-tiles.html) then hosting is easier - as you can either simply "unpack" the .pbf from the MBTiles or install a basic utility extracting these files on demand. BTW the vector tiles down to zoom level 14 contains all street data with details of zoomlevel 20).
The example of such utilities:
other approaches are mentioned at Self-hosting Mapbox vector tiles