1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.1 Resizing the embedded HTML5 YouTube player

Discussion in 'Styling and Customization Questions' started by Cala_Marie, Jul 18, 2013.

  1. Cala_Marie

    Cala_Marie New Member

    I've managed to add (incomplete) functionality to my board that allows users to resize embedded YouTube players to predetermined sizes. Static demonstration.

    Other goals include:
    • Adjust size using gripper.
    • Lock iframe to three sizes (480 x 295, 640 x 360, and 853 x 480).
    • Give feedback to user during resize operation (let them know what the current dimensions are and what dimensions they're about to change to).
    • Fix the UI helper (border that appears then resizing) to the same three sizes listed above.
    • Restrict to lower sizes when browser window is small enough?

    What the YouTube media site bbcode now embeds:
    HTML:
    <div class="bbCodeBlock youTubeEmbed">
        <iframe type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/{$id}" frameborder="0" window="" allowfullscreen></iframe>
    </div>
    Added to EXTRA.css:
    Code:
    /* YouTube embedding CSS */
    .youTubeEmbed
    {
        background: rgb(240, 247, 252);
        padding: 10px;
        width: 480px;
        height: 295px;
    }
    
        .ui-resizable-helper
        {
            border-top: 10px solid #efefef;
            border-right: 10px solid #efefef;
            border-bottom: 25px solid #efefef;
            border-left: 10px solid #efefef;
            border-radius: 2.5px;
            margin: -10px -10px -25px -10px;
        }
    Now the unusual part...
    I uploaded only the bits of jQuery UI (1.10.3, a version listed as incompatible with jQuery 1.5.x - feel free to slap me around a bit with a large trout for doing so) that I needed to my js folder...
    Added to page_container_js_head (I intend to move the stylesheet link to an appropriate template):
    Code:
    <!-- jQuery UI JS -->
    <script src="{$javaScriptSource}/jquery/ui/jquery.ui.core.min.js"></script>
    <script src="{$javaScriptSource}/jquery/ui/jquery.ui.widget.min.js"></script>
    <script src="{$javaScriptSource}/jquery/ui/jquery.ui.mouse.min.js"></script>
    <script src="{$javaScriptSource}/jquery/ui/jquery.ui.resizable.min.js"></script>
    
    <!-- jQuery UI CSS -->
    <link type="text/css" href="{$javaScriptSource}/jquery/ui/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
    Added to page_container_js_body:
    Code:
    // YouTube embedding JS
    $(function () {
    
        var horz = 480;
        var vert = 295;
    
        $(".bbCodeBlock.youTubeEmbed").resizable({
            helper: "ui-resizable-helper",
            handles: "se",
    
            stop: function(event, ui) {
           
                horz = ui.size.width;
                vert = ui.size.height;
               
                if(horz < 559 && vert < 429) {
                    $(this).css({
                        "width":"480px",
                        "height":"295px"
                    });
                }
                else if(horz > 748 && vert > 421) {
                    $(this).css({
                        "width":"853px",
                        "height":"480px"
                    });
                }
                else {
                    $(this).css({
                        "width":"640px",
                        "height":"360px"
                    });
                }
            }
        });
    });
    Does anyone have any thoughts or ideas regarding improvements I could make? Also, if you have a code suggestion for one of the incomplete goals I listed, please let me know. :)
     

Share This Page