Currently, I am working on creating a div structure to add video content to my website. The setup involves using the vidurl for the video URL and srcpost for the background image and poster image when the video is selected.
I have encountered an issue where my code does not seem to work as expected. Despite searching online for similar cases, I couldn't find a solution. It seems like I may be missing something or not asking the question correctly. Initially, it was functional with the attr srcpost containing url("") within it, but I would prefer to eliminate that from the HTML if possible.
jQuery( document ).ready(function() {
loadbgimg();
});
function loadbgimg() {
$( '.video_selection' ).each(function() {
var backgroundimg = $( this ).attr( 'srcpost' ).replace('%', ' ');
$( this ).css('background-image', 'url(' + backgroundimg + ')');
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='http://localhost/movies/Napoleon%Dynamite/napdyn.mp4'
srcpost='http://localhost/movies/Napoleon%Dynamite/poster.jpg'>
<p>Napoleon Dynamite</p>
</div>