Embed Dailymotion Videos in WordPress with Shortcode

Founded in 2005, DailyMotion now has an Alexa score of 83 and is ranked as one of the largest and most profitable video sharing websites in the world. This article will show you how to embed responsive DailyMotion videos in WordPress with shortcode.

The site hosts pornographic content so visiting the service should be done so discreetly.

The Result

The result of our shortcode will render a video container as follows.

The video is responsive so will play nice on mobile devices.

Shortcode Usage

To include the video on your post or page, you should do so by including the video ID (obtained from the URL), or the entire video URL, into our shortcode as follows:

[dailymotion v="x2nvui2" width="580"] or [dailymotion v="http://www.dailymotion.com/video/x2nvui2_sir-james-galway-masterclass-practicing-scales_music" width="580"]

I've defined the video width into my shortcode. This wouldn't be necessary if the width was hard coded into your shortcode function. The height will automatically be determined and applied. If the height doesn't work for you, define it in your shortcode.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Show DailyMotion Videos in a WordPress Post or Page with Shortcode

http://www.beliefmedia.com/code/wp-snippets/embed-dailymotion-wordpress

function beliefmedia_embed_dailymotion($atts) {

$atts = shortcode_atts(array(

'v' => '',

'width' => '540',

'height' => 0

), $atts);

/* Scale the height if not defined */

if (!$atts['height']) $atts['height'] = round($atts['width'] / 1.778);

/* If a URL we'll snatch the ID. Best to provide just ID */

if (strripos($atts['v'], 'http') !== false) {

$regex = '/video\/([^_]+)/';

preg_match($regex, $v, $m);

$v = $m[1];

}

$style = '

.embed-container {

position: relative;

padding-bottom: ' . round(($atts['height'] / $atts['width']) * 100) . '%;

height: 0;

overflow: hidden;

max-width: ' . $atts['width'] . 'px;

margin: 0px auto;

}

.embed-container iframe {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

padding-bottom: 0;

overflow: hidden;

}

</style>

/* Build iframe */

$iframe = '<iframe frameborder="0" width="' . $atts['width'] . '" height="' . $atts['height'] . '" src="//www.dailymotion.com/embed/video/' . $atts['v'] . '" scrolling="no" allowfullscreen></iframe>';

/* Return responsive iframe */

return '<div style="max-width: ' . rtrim($atts['width'], 'px') . 'px; margin: 0px auto;">' . $style . '<div class="embed-container">' . $iframe . '</div>

</div>';

}

add_shortcode('dailymotion', 'beliefmedia_embed_dailymotion');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Considerations

You will find the video ID in the video URL. While you can use the entire video URL, best practice would have you only include the actual video ID in case the URL changes in the future.
DailyMotion hosts an array of content you wouldn't normally see on commercial platforms such as YouTube. Because of the pornography-related material and what has been seen as ISIS propaganda, it isn't the best pick of website for your cat videos.

The Result

Shortcode Usage

WordPress Shortcode

Considerations

Like this article?

Martin Khoury

Leave a comment