YouTube
Layouts
Continue specifying layouts using the "layout" query param. e.g. ?layout=transcript. There are two layouts available for VideoReadr -
- transcript - video and transcript side by side
- transcript2 - stacked, video on top of transcript
Transcript2 now comes in by default with just the video and toolbar showing. See http://videoreadr.com/read/steve-jobs-2005-stanford-commencement-address?layout=transcript2. You will notice that the video is automatically sized at 604x371; the size used on TGNTimes. Clicking on the Video/Transcript/Both buttons shows different views. Transcript2 layout supports 3 parameters that can be specified in the url as well -
- width
- height - height when both video and transcript are visible
- videoHeight - height when only video or only transcript is visible
e.g. http://videoreadr.com/read/steve-jobs-2005-stanford-commencement-address?layout=transcript2&width=400&videoHeight=300&height=500
Themes
Two themes are currently available -
- dark - same as the original VideoReadr look
- light - better suited for sites like TGNTimes
As you would expect, theme is specified using the "theme" query param.
e.g. http://videoreadr.com/read/steve-jobs-2005-stanford-commencement-address?theme=light
Debug options
Add "/edit_properties" to the end of the URL
eg
Use YouTube bar
For the YouTube layer, switch "showController" from false to true
Remove the block that defines the Chrome, i.e. VideoReadr controller
[
"chrome",
"Chrome",
{
"backgroundColor":"#000000"
}
]
VideoReadr Options
Options when embedding VideoReadr -
embed: Must be true
zoomed: Default none
Name of the layer to zoom at the start. Use "zoomed=left" to make the video take up full size at start.Also, when embedded, the video will NOT start automatically. To mimic standard YouTube embed, use "embed=true&zoomed=left"
eg
http://videoreadr.com/read/tgn-first-look-at-runes-of-magic?embed=true&zoomed=left
I will add an 'autostart' option soon to have more control over automatic playback.
Vertical layout
This does not work
videoreadr.com/read/tgn-runes-of-magic-first-look?embed=true&background=#000000&layout=transcript2
Use %23 to escape the #
videoreadr.com/read/tgn-runes-of-magic-first-look?embed=true&background=#23000000&layout=transcript2
Or use English color names
videoreadr.com/read/tgn-runes-of-magic-first-look?embed=true&background=black&layout=transcript2
Fixed height
I would like to increase the width and height of the embedded video
For example
runesofmagic-wiki.com/about
If I do, it just adds blank space below (it should grow the video vertically).
Answer: I had to hardcode the height in CSS.. couldn't find a way to make the transcript div autosize while keeping the videoreadr toolbar at the bottom. I'll look into that later.. maybe you have some ideas how to tweak the CSS. For now, let me know what height you would like and I'll change the hardcoded values accordingly.