javascript - How to add height and width to Jquery function -
i working jquery script found online ticketing software. adds functionality of adding videos wiki. problem not set height or width video possible can done 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 output in html
<p> <a border="0" class="fb_attachment" href="default.asp?pg=pgdownload&pgtype=pgwikiattachment&ixattachment=136818&sfilename=paragon%20invoice%203.mp4" rel="nofollow" title="">paragon invoice 3.mp4</a></p>
even if possible manually add html. can't add inline css elements. tried wrapping div won't take inline style deletes upon submission.
can add height , width jquery code automatically set height , width of videos.
this should work. please note using max-width
style do.
if ($('#ideditarticle')) { var videos = $('a[href$=".m4v"], a[href$=".mp4"]'); $.each(videos, function(i, video) { // added style attribute here. $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>'); }); }
a clearer (from coding perspective) way be:
if ($('#ideditarticle')) { // search matching elements. returns array of jquery objects. var videos = $('a[href$=".m4v"], a[href$=".mp4"]'); // use array.each iterate on preceeding array. videos.each(function(){ // create link, video , source element var link = $(this); var video = $('<video />'); var source = $('<source />').attr('src', link.attr('href')); // append element correctly create tree video.append(source); // heres apply multiple style elements video.css({'max-width':'100%'}); // prepend tree desired location link.parent().prepend(video); }); }
the implementation works (might have had space in < source />
- supposed <source />
:
// search matching elements. returns array of jquery objects. var videos = $('a[href$=".m4v"], a[href$=".mp4"]'); // use array.each iterate on preceeding array. videos.each(function(){ // create link, video , source element var link = $(this); var video = $('<video />'); var source = $('<source />').attr('src', link.attr('href')); // append element correctly create tree video.append(source); video.css('max-width','100%'); // prepend tree 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>
Comments
Post a Comment