How does this theme support responsive video shortcodes?

  • zerodivide85

    (@zerodivide85)


    12 years, 7 months ago

    WP 3.6+ has integrated MediaElementJS into the core and I think that’s great. However I’ve been troubleshooting getting videos to be responsive using shortcodes.

    I write custom themes from the ground up for clients and I knew something was wrong with theme I was writing because videos are responsive with no problems using Twenty Thrirteen. However when I switch to my theme none of the videos are responsive.

    While using shortcodes, I eventually noticed that Twenty Thirteen rendered style="width: 100%;" on the video element in it’s markup and my theme wasn’t. I was really curious as to why this was happening. Eventually I ended up looking in WP’s core. In /wp-includes/media.php on line 1071 I found:

    $html .= sprintf( '<video %s controls="controls">', join( ' ', $attr_strings ) );

    I modified that line to:

    $html .= sprintf( '<video %s controls="controls" style="width: 100%%;">', join( ' ', $attr_strings ) );

    After manually forcing WP to include 100% width my videos are now responsive. I tried adding 100% with to the shortcode used in my content and it doesn’t work. It was interpreted as 100px in my theme. But somehow it does with Twenty Thirteen.

    I understand that modifying the core is a bad idea so I’m curious, how does Twenty Thirteen honor the inline width 100% for responsive videos without hacking the core? I searched for filters and couldn’t find any.

Viewing 5 replies - 1 through 5 (of 5 total)
  • wanwu

    (@wanwu)

    12 years, 6 months ago

    I can’t seem to get it to work in my theme, either….

    http://stackoverflow.com/questions/19807778/wordpress-core-responsive-video-not-working-with-shortcode

    Any ideas greatly appreciated!

    P

    Thread Starter zerodivide85

    (@zerodivide85)

    12 years, 6 months ago

    I ended up solving this by adding 100% width and height inline using jquery. So something like…

    jQuery(‘video’).css(‘width’, ‘100%’).css(‘height’, ‘100%’);

    Can be added to your main js script file. I don’t think the solution is ideal though. Technically 100% width and height isn’t how responsive video is suppose to work and that’s really just a flag for MediaElement to recognize that the video is suppose to be responsive.

    A better solution would be to make video responsive by default in the core then add an attribute that can disable it if necessary. WordPress can handle the details. So something like [video responsive="false"]. I guess a filter can be written to accomplish this. Not really sure why a similar approach isn’t part of the core or if there’s a good reason for it not to be in the core though.

    wanwu

    (@wanwu)

    12 years, 6 months ago

    Thanks for the reply.

    Odd though – because with this CSS:

    .videocontent {
    width: 100%;
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
    }

    And this HTML in my homepage.php:

    <div class=”videocontent”>
    <video id=”myvideo2″ style=”width:90%;height:100%;” controls=”controls”>
    <source src=”http://localhost/dnp/stalker.webm&#8221; type=”video/webm”/>
    </video>
    </div>

    This works fine. See http://www.deekwa.com/dnp – the top example.

    But with:

    .wp-video-shortcode {
    max-width: 100%;
    }

    And this HTML:

    <div class=”videocontent”>
    <?php
    echo do_shortcode(‘[video webm="http://localhost/dnp/stalker.webm" width=100%]‘);
    ?>
    </div>

    doesn’t work – i.e. doesn’t scale to full size of .videocontent div…

    I looked into Firebug and could see that there was a mejs-container that was being produced as part of the HTML from the do_shortcode, which I think was causing issues. I have spent all day getting xdebug2.2.3 recompiled to work on OS X Mavericks so I will dig into mediaelement tomorrow by looking into the do_shortcode call.

    The .wp-video-shortcode CSS *did* help it rescale but only below the 640px that it is being constrained to. And the video in the example is 720px – which again I don’t understand why calling the shortcode is putting it inside this container…

    I really want to be able to add media into the core as it gives a much cleaner back-end interface <to> theme.

    Frustrating that as you say this hasn’t be implemented properly.

    Bottom example at http://www.deekwa.com/dnp is the result I am getting with the shortcode. Doesn’t scale to full size of div as you re-size the browser.

    Have been more comments at SO:

    http://stackoverflow.com/questions/19807778/wordpress-core-responsive-video-not-working-with-shortcode

    P

    wanwu

    (@wanwu)

    12 years, 6 months ago

    BTW – you could have added the .video CSS in your CSS file rather than using jQuery?

    e.g.

    video {
    max-width: 100%;
    }

    wanwu

    (@wanwu)

    12 years, 6 months ago

    Just got this from SE forum:

    The width=100% parameter is not valid in the video shortcode. It must be a number, in pixels, or omitted entirely.

    If it is omitted, then the code will use the $content_width global from the theme to define the width of the containing DIV.

    For more info on Content Width, see here:

    http://codex.ww.wp.xz.cn/Content_Width

    http://wordpress.stackexchange.com/questions/121410/wordpress-core-responsive-video-not-working-with-shortcode/121480?noredirect=1#121480

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How does this theme support responsive video shortcodes?’ is closed to new replies.