Learn to implement height and width in Jquery functionality

Question

Learn to implement height and width in Jquery functionality

Recently, I came across a jQuery script online that enhances the functionality of my ticketing software by allowing me to add videos to a wiki. However, there is an issue with the code as it doesn't specify a height or width for the video. Is there a way to modify the code to include these dimensions?

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/>');
    });
}

Below is the HTML output:

<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>

Although manually adding height and width attributes to the HTML seems feasible, I encountered difficulties in applying inline CSS styles directly to the elements. Wrapping the content in a div didn't work either, as it deleted the style upon submission.

Is it possible to incorporate height and width specifications into the jQuery code to automatically set these values for the videos?

javascript jquery html css

Answer 1

Answer №1

This solution is effective. Please keep in mind that I am utilizing the max-width property in this example, but any other CSS style can be used.

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

A more straightforward approach (from a coding perspective) would be:

if ($('#idEditArticle')) {
    // Select all matching elements and return an array of jQuery objects.
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    // Use the videos.each method to iterate through the preceding array.
    videos.each(function(){
        // create link, video, and source elements
        var link   = $(this);
        var video  = $('<video />');
        var source = $('<source />').attr('src', link.attr('href'));
        // correctly append the elements to build a tree structure
        video.append(source);
        // Apply multiple styling attributes here
        video.css({'max-width':'100%'});
        // prepend the tree to the desired location
        link.parent().prepend(video);
    });
}

The implementation works well (there may have been an additional space in < source /> - it should actually be <source />:

        // Select all matching elements and return an array of jQuery objects.
        var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
        // Use the videos.each method to iterate through the preceding array.
        videos.each(function(){
            // create link, video, and source elements
            var link   = $(this);
            var video  = $('<video />');
            var source = $('<source />').attr('src', link.attr('href'));
            // correctly append the elements to build a tree structure
            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>

Answer 2

This solution is effective. Please keep in mind that I am utilizing the max-width property in this example, but any other CSS style can be used.

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

A more straightforward approach (from a coding perspective) would be:

if ($('#idEditArticle')) {
    // Select all matching elements and return an array of jQuery objects.
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    // Use the videos.each method to iterate through the preceding array.
    videos.each(function(){
        // create link, video, and source elements
        var link   = $(this);
        var video  = $('<video />');
        var source = $('<source />').attr('src', link.attr('href'));
        // correctly append the elements to build a tree structure
        video.append(source);
        // Apply multiple styling attributes here
        video.css({'max-width':'100%'});
        // prepend the tree to the desired location
        link.parent().prepend(video);
    });
}

The implementation works well (there may have been an additional space in < source /> - it should actually be <source />:

        // Select all matching elements and return an array of jQuery objects.
        var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
        // Use the videos.each method to iterate through the preceding array.
        videos.each(function(){
            // create link, video, and source elements
            var link   = $(this);
            var video  = $('<video />');
            var source = $('<source />').attr('src', link.attr('href'));
            // correctly append the elements to build a tree structure
            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>

Learn to implement height and width in Jquery functionality

Answer №1

Similar questions

Rotate the horizontal scroll of an inner div within an outer div using CSS

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

The correlation among the event loop, libuv, and the V8 engine

Why is DIV centered in desktop browsers but not on iPhone?

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

POST requests in Angular Universal are making use of the IP address assigned to my server

Tips for preventing odd symbols from appearing before the query in Firefox

Steps for building HTML based on the provided layout

Unresolved issue with Flask failing to retrieve URL argument from AJAX request

Updating values in an Object by assigning them with results from an array

Difficulty retrieving JSON object with AngularJS

Issue with Nav Bar Toggle not changing text to white color

Using the increment operator within a for loop in JavaScript

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

The closure of the Mongoose connection is triggered by the update of the node

The body can only stretch up to a certain percentage of its width, not a full 100%

Modify the DOM element stored in a variable before inserting it

Tips for utilizing the simple-peer module within a Node.js environment?

How do you typically approach testing Cloud Code on Parse?

The div has extra white space at the bottom due to the Hide/Show content feature