Inserting a new <div></div> on the page
I am looking to develop a test on some of our product pages that utilize branded video to enhance the overall experience. To accomplish this, I am looking to insert a blank div above the product name that is located underneath the images/sizing selector, etc.
my first attempt is below...but the editor is not down with this at all:
$('h2').prepend("<div id = "video_container">...</div>")
I've done this before with images and noticed that the img ID always ends up being "<img_id = optimizely_xxxxxx>" or something along those lines. Just wondering if someone might be able to help me out here and let me know the correct documentation for adding additional content areas on the page.
Hoping to populate this blank div with an iFrame that will house the video.
Also, depending on the div that h2 is, you may wanna use .before instead of prepend (imagine if the div has some width constrains and you want to add full width video frame).
Aside from the quotes around "video_container" not being escaped and a missing semi-colon the code appears to be correct. What happens when you run the line of code on your page using Chrome or Firefox's dev tools?