jquery - base video src for thumbnails -
after digging, able set base src iframes, eliminating need base target , base href in 1 fell swoop. not taking credit it, altered existing fiddles suit needs.
https://jsfiddle.net/1fj3gq9s/2/
html <iframe frameborder="0" width="700" height="430"></iframe> <br><br> <div class="vidlist"> <a vid="8pdr1_pvnbe">supernatural season 1 episode 1</a> <a vid="lhb2ouq1aqy">supernatural season 1 episode 2</a> </div> jquery $('.vidlist a').click(function() { $('iframe').attr('src', 'https://openload.co/embed/' + $(this).attr('vid')); return false; }); css .vidlist { cursor: pointer; color: blue; border: 2px solid blue; padding: 3px; margin: 15px; border-radius: 5px; }
works great links, not setting base path video , image thumbnails. using b-lazy lazy loading videos, uses data-src attribute. shorten links setting base path videos, not disabling b-lazy in process.
this doesn't work
html <div class="vidlist"> <video data-src="movie.ogg"></video> </div> jquery $( document ).ready(function() { $('.vidlist video').attr('src', 'http://www.w3schools.com/html/' + $(this).attr('data-src')); }); css .vidlist video { width: 320px; height: 180px; border: 1px solid black; }
being new web development, not know how ask right questions. doing wrong? trying feasible? there workaround if not allow lazy loading?
html.
<div class="vidlist"> <video data-src="movie.ogg"> </video> </div>
jquery. best use data
method data-src
$( document ).ready(function() { var targetsrc = 'http://www.w3schools.com/html/' + $('.vidlist video').data('src'); $('.vidlist video').append('<source src="' + targetsrc + '" type="video/ogg">'); $('.vidlist video')[0].play(); //access js api video object });
css. ensure video element has width , height
video { width: 400px; height: 300px; }
hope helps
Comments
Post a Comment