http://webdesignerwall.com/tutorials/css-elastic-videos
http://webdesignerwall.com/demo/elastic-videos
http://webdesignerwall.com/demo/elastic ... video.html
and the last one requires install (including adding MIME types to your .htaccess with the instructions here: http://mediaelementjs.com/#installation
YouTube:
Make a User Defined Tag (UDT) titled:
elastic_youtube_iframe
Put this in the *Code field:
Code: Select all
/*
Elastic YouTube iFrame for use with responsive css
Parameter: url
Reference: http://webdesignerwall.com/demo/elastic-videos/
*/
echo '<div class="video-container">';
echo '<__iframe width="853" height="510"';
echo ' src="'.$params['url'].'"';
echo '></__iframe></div>';
Code: Select all
{elastic_youtube_iframe url=""}
http://www.youtube.com/v/UiszfEazOaI
Vimeo
Code: Select all
/*
Elastic Vimeo iFrame for use with responsive css
Parameter: url
Reference: http://webdesignerwall.com/demo/elastic-videos/
*/
echo '<div class="video-container">';
echo '<__iframe width="800" height="450"';
echo ' src="'.$params['url'].'"';
echo '></__iframe></div>';
Code: Select all
{elastic_vimeo_iframe url=""}
Html5 Video Solution 1
See: http://mediaelementjs.com/#installation on this first method that supports nearly everything, but without a flash fallback.
Make a UDT titled:
Code: Select all
html5_video_mediaelementsjs
Code: Select all
/*
Elastic HTML Video for use with responsive css and mediaelements.js
Parameter: url
Reference: http://webdesignerwall.com/demo/elastic-videos/
*/
echo '<video id="'.$params['id'].'"';
echo ' width="700" height="390" controls="control" preload="none">';
echo '<source src="'.$params['mp4'].'" type="video/mp4" />';
echo '<source src="'.$params['webm'].'" type="video/webm" />';
echo '<source src="'.$params['ogv'].'" type="video/ogv" />';
echo '</video>';
Code: Select all
{html5_video_mediaelementsjs id="player1" mp4="video.mp4" webm="video.webm" ogv="video.ogv"}
See: http://mediaelementjs.com/#installation on this all encompassing method that supports a flash fallback with an image if the device does not support video.
Make a UDT titled:
Code: Select all
html5_video_mediaelements_fb
Code: Select all
/*
Elastic HTML Video for use with responsive css and mediaelements.js
Parameter: url
Reference: http://webdesignerwall.com/demo/elastic-videos/
Instructions for installing: mediaelementjs.com
*/
echo '<video id="'.$params['id'].'"';
echo ' width="700" height="390" controls="control" preload="none">';
echo '<source src="'.$params['mp4'].'" type="video/mp4" />';
echo '<source src="'.$params['webm'].'" type="video/webm" />';
echo '<source src="'.$params['ogv'].'" type="video/ogv" />';
echo '<object width="700" height="390" type="application/x-shockwave-flash" data="flashmediaelement.swf">';
echo '<param name="movie" value="flashmediaelement.swf" />';
echo '<param name="flashvars" value="controls=true&poster='.$params['image'].'&file='.$params['mp4'].'" />';
echo '<!-- Image as a last resort -->';
echo '<img src="'.$params['image'].'" width="700" height="390" title="No video playback capabilities" />';
echo '</object>';
echo '</video>';
Code: Select all
{html5_video_mediaelements_fb id="player1" mp4="video.mp4" webm="video.webm" ogv="video.ogv" image="video.jpg"}