Embed plugin height

daybugging · December 8, 2017, 7:22pm

Hey there,
been playing around with @distantnative’s Embed plugin, great stuff. But I want to change the dimension to 16:9, does anybody know how to do that?

debug information for normal youtube kirbytag outputs: "size": "566:960", whereas embed plugin adds height: "size": "719:960" (960px being my content width).

thx

texnixe · December 8, 2017, 9:01pm

The aspect ratio is calculated automatically depending on the code of the video, it seems. This is where the padding is calculated:

# embed/core/html.php #84ff
  protected function prepareVideo() {
    if($this->data['code']) {
      // Container ratio
      $this->data['style'] = 'padding-top:' . str_replace(',', '.', $this->core->aspectRatio()) . '%';

      // Lazy video
      if($this->options['lazyvideo'] && $this->core->supportsLazyVideo()) {
        $this->lazyVideo();
      }
    }
  }

distantnative · December 31, 2017, 8:15am

As @texnixe pointed to, the embed size is set via adding padding to the top of the container. The amount is determined through the aspectRatio which we get as a result from the oembed call made to youtube.

jimbobrjames · December 31, 2017, 9:23am

Your source video needs to be 960 by 540. You need to do this with a video editor and re-upload to youtube. There is a calculator here if it helps, and a list of real 16:19 sizes (its possible to fake 16:9 through html and css. Don’t do this).

anon77445132 · December 31, 2017, 10:05am

@daybugging:

If you need to convert your video, I suggest to use http://ffmpeg.zeranoe.com/builds/.

If you use Windows OS on your client, you can use the file doit_ffmpeg_800x450.bat:

@ECHO OFF
ECHO "%~nx0" "%1"
REM last update: 16:55 24.10.2016 by HeinerEF
REM
REM # Windows-/DOS-Script
REM
REM This script takes any (high resolution) video file as input and converts it to MP4 (H264 & AAC), WebM (VP8 & Vorbis) and OGV (theora & vorbis) for HTML5 <video>. For each format, it creates a low quality version (bitrate like 2000 kb/s) in a preselected size (look for "progoptions" in your configuration area).
REM ffmpeg has to be installed, see http://ffmpeg.zeranoe.com/builds/ for downloads.
REM
REM Usage: doit_ffmpeg_800x450.bat <inputfile>
REM
REM Tip:   Drag the video file (inputfile) in the windows explorer and drop it on the icon of this script or on the icon of a link to this script.
REM
REM This is heavily inspired by
REM - https://github.com/kornl/video-conversion/blob/master/convert_video_for_html_5.sh
REM - https://github.com/mickro/video2html5/blob/master/video2html5.sh
REM - http://diveintohtml5.info/video.html#webm-cli
REM - https://github.com/fanningert/kirbycms-extension-video
REM
REM ------------------------------------------------------
REM
set infile="%~1"
set outpath=%~dp1
set filename=%~n1
set dirname=result
set outfile=%~dp1%dirname%\%~n1
set logfile="%~dpn1_ffmpeg-result.log"
REM
REM ----------------------------------------------------------------------------
REM Start of your configuration area
REM
REM Note: "%~d0" is the actual drive name of this file (e.g. = "C:" or "I:").
REM       This assumes, that the ffmpeg files are located at the same drive.
REM
REM path to the utility ffmpeg.exe (surrounded by ""):
set prog="%~d0\portable\ffmpeg\bin\ffmpeg.exe"
REM
REM add all options you like or need for the utility ffmpeg.exe (_NOT_ surrounded by ""):
REM e.g.: "-s 800x450" for size of 800 * 450 pixel for the converted files! This is 16:9.
set progoptions=-s 800x450
REM
REM path to the utility ffprobe.exe (surrounded by ""):
set probe="%~d0\Portable\ffmpeg\bin\ffprobe.exe"
REM
REM End of your configuration area
REM ----------------------------------------------------------------------------
REM
ECHO.
ECHO infile         =%infile%
ECHO outfile        ='%outfile%.*'
ECHO logfile        =%logfile%
ECHO.
ECHO ffmpeg         =%prog%
ECHO ffmpeg-options ='%progoptions%'
ECHO ffprobe        =%probe%
ECHO.
ECHO ------------------------------------------------------------------------------
ECHO.
IF /I "%1t" == "t" GOTO error
IF /I NOT EXIST "%1" GOTO error
IF /I NOT EXIST "%prog%" GOTO missingfile1
IF /I NOT EXIST "%probe%" GOTO missingfile2
IF /I EXIST "%outpath%%dirname%" GOTO convert
MD "%outpath%%dirname%"
IF /I EXIST "%outpath%%dirname%" GOTO convert
ECHO.
ECHO.
ECHO ERROR!
ECHO.
ECHO The directory "%outpath%%dirname%" is missing and could not be created!
ECHO.
pause
goto ende
:error
ECHO ERROR!
ECHO.
ECHO No video file was given as first parameter of this script!
ECHO.
ECHO.
ECHO Drag the video file (inputfile) in the windows explorer and drop it on the icon of this script "%~nx0" or on the icon of a link to this script(*.lnk-file).
ECHO.
ECHO German translation/Deutsche Übersetzung:
ECHO Schieben Sie im Windows-Explorer die Video-Datei per 'Drag and Drop' auf dieses Script "%~nx0" oder auf eine Verknüpfung zu diesem Script (*.lnk-Datei).
ECHO.
pause
goto ende
:missingfile1
ECHO ERROR!
ECHO.
ECHO The file %prog% was not found!
ECHO.
ECHO Please look at 'set prog=%prog%' in 'your configuration area' within the file "%0"!
ECHO.
pause
goto ende
:missingfile2
ECHO ERROR!
ECHO.
ECHO The file %probe% was not found!
ECHO.
ECHO Please look at 'set probe=%probe%' in 'your configuration area' within the file "%0"!
ECHO.
pause
goto ende
:convert
ECHO.
ECHO Converting starts 4x in its respective own window...
ECHO.
ECHO MP4   (%filename%.mp4)
START "ffmpeg %filename%.mp4" /wait %prog% -i %infile% %progoptions% -hide_banner -acodec aac -vcodec libx264 -vb 2000k -f mp4 -y "%outfile%.mp4"
ECHO.
ECHO WebM  (%filename%.webm)
START "ffmpeg %filename%.webm" /wait %prog% -i %infile% %progoptions% -hide_banner -acodec libvorbis -vcodec libvpx -vb 2000k -f webm -y "%outfile%.webm"
ECHO.
ECHO OGV   (%filename%.ogv)
START "ffmpeg %filename%.ogv" /wait %prog% -i %infile% %progoptions% -hide_banner -acodec libvorbis -vcodec libtheora -vb 2000k -y "%outfile%.ogv"
ECHO.
ECHO Photo (use it with the HTML-code " poster=%filename%.jpg" inside the video tag)
START "ffmpeg %filename%.jpg" /wait %prog% -ss 0.5 -i %infile% %progoptions% -hide_banner -vframes 1 -q:v 2 -y "%outfile%.jpg"
ECHO.
:logging
ECHO.
ECHO Create a LOG-file...
ECHO.
ECHO %date% %time% - "%1">%logfile%
ECHO. >>%logfile%
ECHO %prog% -i %infile% %progoptions% >>%logfile%
ECHO. >>%logfile%
ECHO Input-file: >>%logfile%
ECHO. >>%logfile%
%probe% -hide_banner %1 2>>%logfile%
ECHO. >>%logfile%
ECHO 4 Output-files: >>%logfile%
ECHO. >>%logfile%
%probe% -hide_banner "%outfile%.mp4" 2>>%logfile%
ECHO. >>%logfile%
%probe% -hide_banner "%outfile%.webm" 2>>%logfile%
ECHO. >>%logfile%
%probe% -hide_banner "%outfile%.ogv" 2>>%logfile%
ECHO. >>%logfile%
%probe% -hide_banner "%outfile%.jpg" 2>>%logfile%
ECHO. >>%logfile%
ECHO. >>%logfile%
ECHO You can use the following HTML-code (use the part between the two "") in your webpage: >>%logfile%
ECHO. >>%logfile%
ECHO "<video class='ffmpegvideo' controls='controls' poster='%filename%.jpg'><source src='%filename%.webm' type='video/webm'><source src='%filename%.mp4' type='video/mp4'><source src='%filename%.ogv' type='video/ogg'></video>" >>%logfile%
ECHO. >>%logfile%
ECHO Show the LOG-file (in editor)...
start "show logfile" %logfile%
ECHO ...done!
ECHO.
ECHO You can use the following HTML-code (use the part between the two "") in your webpage:
ECHO.
ECHO "<video class='ffmpegvideo' controls='controls' poster='%filename%.jpg'><source src='%filename%.webm' type='video/webm'><source src='%filename%.mp4' type='video/mp4'><source src='%filename%.ogv' type='video/ogg'></video>"
ECHO.
:ready
ECHO READY!
ECHO.
ECHO Hint: Look for "%outfile%.*" (4 files)!
pause
:ende
exit

after you have updated your paths and the needed size in the “configuration area” of that file.

Topic		Replies	Views
Embed videos aspect ratio	5	685	March 7, 2022
Kirby 2 video embed size problem Solved ✅ embed , youtube , vimeo	11	2713	January 2, 2019
How to get video size through kirby Solved ✅	4	595	August 14, 2018
Set width of iframe coming from embed plugin or video block media	3	96	April 16, 2024
Video has no data on dimensions, ratio or orientation Questions 🤔	2	1010	June 15, 2019

Embed plugin height

Related Topics