literature

Compact embedded player [v4]

Deviation Actions

Fli-c's avatar
By
Published:
25.6K Views

Literature Text

Tutorial has been updated three times
Changelog in the description
A quick guide to embedding of compact video players :dummy:

The "compact" I mean player that embedded only for music (in case when you don't care about video or don't want it to take too much space in your custom box or journal).
Here's an example:


Default embedded youtube player (<da:embed profile="youtube" id="NWd5x09gWoE">):
[text valign] [text valign]


And compact version (see the code below):
[text valign] [text valign]


How it works:

<container with overflow:hidden>
   <spacer with necessary height>
   <video with position:absolute, bottom:0>
</container>


Actual code:

<div class="pagination f sitback-container talk-post popup2-clear">
   <img width="544" height="30" src="http://fc06.deviantart.net/fs71/f/2012/153/f/0/enable_flash_plz_by_fli_c-d51zq3w.png">
   <div class="sitback-slide flex-bottom popup2-clear">
      <da:embed width="544" height="340" profile="youtube" id="NWd5x09gWoE">
   </div>
</div>


Copypastable code:

<div class="pagination f sitback-container talk-post popup2-clear"><img width="544" height="30" src="http://fc06.deviantart.net/fs71/f/2012/153/f/0/enable_flash_plz_by_fli_c-d51zq3w.png"><div class="sitback-slide flex-bottom popup2-clear"><da:embed width="544" height="340" profile="youtube" id="--utoob-video-id--"></div></div>

Explanation:

External div classes -
   .pagination → display: inline-block;
   .f → vertical-align: top;
   .sitback-container → overflow: hidden; + padding-bottom: some;
   .talk-post → padding-bottom: none;
   .popup2-clear → remove trash

Internal div classes -
   .sitback-container > .sitback-slide → position: absolute;
   .flex-bottom → bottom: 0;
   .popup2-clear → remove trash

Image -
   It seems that iframe width of 544 pixels is the minimum for automatic selection of "360p" video (and audio) quality.
   And since this spacer pic will be visible if Flash player is disabled, then it's would be nice to write something on it :)
   You can use this picture, draw you own, or generate solid color spacer by using sh.deviantart.net api

That's it :dummy:
Eeyup, another google-translated tutorial. At this time about video players.

Changelog:
[v1] - first release :)
[v2] - dA removes some basic styles (temporarily)
[v3] - YouTube's new resolution selection principle
[v4] - dA banned the use of "id" and puts some CSS changes

Known issues:
- Compact player has fixed width and will not be automatically resized on insufficient container size
- Opera 11 on Win7x64 can't draw overlapping plugins, so if players be located under each other - only bottom one be visible
- It's not tested with other video players (Vimeo, dA film)
© 2012 - 2024 Fli-c
Comments125
Join the community to add your comment. Already a deviant? Log In
De-mon-e's avatar
OOC: Yes hello, I am trying to use the compact version, but it keeps saying "Please enable flash player" and I checked my settings and it is enabled

help me please-