CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rajat Sharma
Rajat Sharma

Reputation: 55

How to add height and width to Jquery function

I am working with a jquery script i found online for my ticketing software. It adds the functionality of adding videos to a WIKI. the problem is it does not set a height or width to the video is it possible that it can be done with this code?

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls></video><br/>');
    });
}

here is the output in html

<p>
<a border="0" class="fb_attachment" href="default.asp?pg=pgDownload&amp;pgType=pgWikiAttachment&amp;ixAttachment=136818&amp;sFileName=Paragon%20Invoice%203.mp4" rel="nofollow" title="">Paragon Invoice 3.mp4</a></p>

Even if its possible to manually add it to the html. I can't add inline css to the elements. I tried wrapping it into a div but it won't take an inline style it just deletes it upon submission.

Can i add a height and width to the jquery code to automatically set the height and width of videos.

Upvotes: 0

Views: 153

Answers (1)

somethinghere
somethinghere

Reputation: 17330

This should work. Please note I am using max-width but any style will do.

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        // Added a style attribute here.
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>');
    });
}

A clearer (from a coding perspective) way would be:

if ($('#idEditArticle')) {
    // Search for all matching elements. Returns an array of jQuery objects.
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    // Simply use the array.each to iterate over the preceeding array.
    videos.each(function(){
        // now create a link, video and source element
        var link   = $(this);
        var video  = $('<video />');
        var source = $('<source />').attr('src', link.attr('href'));
        // append the element correctly to create a tree
        video.append(source);
        // Heres where you apply multiple style elements
        video.css({'max-width':'100%'});
        // prepend the tree to the desired location
        link.parent().prepend(video);
    });
}

The implementation works (might have had an extra space in < source /> - its supposed to be <source />:

        // Search for all matching elements. Returns an array of jQuery objects.
        var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
        // Simply use the array.each to iterate over the preceeding array.
        videos.each(function(){
            // now create a link, video and source element
            var link   = $(this);
            var video  = $('<video />');
            var source = $('<source />').attr('src', link.attr('href'));
            // append the element correctly to create a tree
            video.append(source);
            video.css('max-width','100%');
            // prepend the tree to the desired location
            link.parent().prepend(video);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="test.mp4">Test</a>

Upvotes: 2

Related Questions