elastic video udts for new youtube iframe, vimeo, and html5

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

elastic video udts for new youtube iframe, vimeo, and html5

Post by carasmo »

These work in conjunction with CSS here:

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>';
Use:

Code: Select all

{elastic_youtube_iframe url=""}
On your page, where the url filled in with is the path to the video, like:
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>';
Use:

Code: Select all

{elastic_vimeo_iframe url=""}
Where the url is the path to the video, such as: http://player.vimeo.com/video/6284199?t ... portrait=0

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>';
Use:

Code: Select all

{html5_video_mediaelementsjs id="player1" mp4="video.mp4" webm="video.webm" ogv="video.ogv"}
Html5 Video Solution 2
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>';
Use:

Code: Select all

{html5_video_mediaelements_fb id="player1" mp4="video.mp4" webm="video.webm" ogv="video.ogv" image="video.jpg"}
elkman
Power Poster
Power Poster
Posts: 262
Joined: Thu Jan 11, 2007 9:16 pm
Location: Colorado

Re: elastic video udts for new youtube iframe, vimeo, and ht

Post by elkman »

Very, very useful tip. Thanks!

Elkman
Post Reply

Return to “Tips and Tricks”