I am having an issue placing a YouTube video in my Product Image Gallery. Currently, I have a large photo as the main product photo and thumbnails change the main product photo. An example is on my website here. When I try to place a video in the code below, I get a broken image link.
I'd like for the YouTube video to play when the thumbnail is selected. If I could get some assistance with this, that would be great. Being new to coding has limited my ability in solving this problem.
Right now, this is a pure HTML solution and the code is below. I am open to javascript though if that is easier.
I appreciate any and all help with this! Thank you
HTML Main Product Photo
<div class="image"><img name="preview" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt=""/></div>
Thumbnails
<div class="thumbnails">
<img onclick="preview.src=img1.src" name="img1" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt="" /><img onclick="preview.src=img2.src" name="img2" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/end.jpg" alt="" /><img onclick="preview.src=img3.src" name="img3" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/lhsl.png" alt="" /><img onclick="preview.src=img4.src" name="img4" src="https://www.youtube.com/watch?v=TTiEz5j48x4" alt="" />
So here you are: Working Fiddle
(function ($, w) {
w.contentToggle = {
addVideo: function (videoId) {
$('.image').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + videoId +'?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
},
addImage: function (imageSrc) {
$('.image').html('<img name="preview" src="' + imageSrc + '" alt=""/>');
}
};
})(jQuery, window)
It is just a small script which changes the html content of .image on click of the thumbnails. Because jQuery is already included to your website I used it. Of course you can do things like this with pure JS (vanilla).
Hope you got the basic concept of switching contents with jQuery.
With this js snippet you have a new object (contentToggle) available at the global scope. This object contains two functions addVideo() and addImage().
Have fun improving this approach.
You are inserting a video link in a <img> tag, so it's the reason why doesn't work.
A solution could be insert it in a iframe as:
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
I hope it's helps.
It has to be because of SSL/TLS certification or Copyright issues. Every video on web have a embed code. You have to copy that and paste in your main 'div'.
like I have a embed code for a video:
<iframe width="854" height="480" src="https://www.youtube.com/embed/3R1ysTlxiVY" frameborder="0" allowfullscreen></iframe>
now cut the this specific part,
src="https://www.youtube.com/embed/3R1ysTlxiVY"
and copy to your desired container. Now, this is will not be contained into specific area as it is given any height-width, so you have to set width-height for that. You can attach the whole iframe in that case. if you don't allow full screen just set
allowfullscreen="0"
I hope this might work for you.
Related
To clarify - I've built a comment system that sanitizes all HTML and displays it as plaintext to prevent trolling, cross-site scripting, etc.
On top of that, I have javascript that runs after the page loads, and detects DIRECT links to Youtube and Imgur content, then builds the appropriate player/frame/tag to display that content.
Here is my example code:
<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg
https://www.youtube.com/watch?v=t-ZRX8984sc
</div>
And script:
$('.video').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});
$('.imgur').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');
});
I can get one to work without the other - however - running both on the same page invariably produces broken tags and links like this, depending on the order:
<iframe width="420" height="345" src="https:<img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>
Why won't my code differentiate between Imgur and Youtube and handle them separately? I'm new at Regex and cannot tell what I'm doing wrong. If anyone could sort me out I'd be grateful.
Your Imgur regex matches too many URLs, e.g.:
https://example.com
https://www.youtube.com/watch?v=foobar
https://imgur.com/foobar
Try using this regex instead: /(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g
I came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?
Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)
I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>
I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here
I am using UIkit framework for my website and I can't figure out how to make a video slider. I am using "slidenav" and "slideshow" components from the framework, but nothing works. Here is my HTML
<div class="uk-slidenav-position" data-uk-slideshow>
<ul class="uk-slideshow">
<li>
<iframe src="https://www.youtube.com/embed/WIVuAsKwDnQ?rel=0&showinfo=0" frameborder="0"
allowfullscreen></iframe>
</li>
<li>
<iframe src="//player.vimeo.com/video/110284060? color=ffffff&byline=0&portrait=0" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</li>
</ul>
</div>
I've copy-pasted the example from the http://getuikit.com/docs/slideshow.html into a working jsfiddle: https://jsfiddle.net/6d6pwrrz/
I've added your links as a <li><iframe>
You can experiment with this yourself further.
All styles are copypasted from the element on the getuikit website.
To keep in mind: you need to add the libraries for the slideshow and slidenav css & javascript.
If you want to see the working code on the getuikit.com website, i use the 'inspect element' function -right click in chrome- on the working examples.
There you can find more information than in the codesnippets provided.
Looks to me like you are missing the ID in your Slideshow <div>. Try this
<div id="mySlideshow" class="uk-slidenav-position" data-uk-slideshow>
Important to understand is that in JS
var slideshow = UIkit.slideshow($('#yourEl'), {option:value})
is effectively the same as <div id="yourEl" data-uk-slideshow="...>.
I have a requirement where I need to embed the video code directly in a blog.
I was able to figure out the code where the video is there, I stored it in a html file,named it as video.html
This is the link from where I have to extract the video, Watch Video link:
http://www.moneycontrol.com/news/stocks-views/hdil-tata-global-ifci-top-picks-manoj-vayalar_925072.html
The problem is that when I upload video.html file, only the static image gets loaded. I need the video to be playable when I click the button, so that I can directly insert this video.html in the blog.
Here is the code:
<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"></span><strong>Watch Video</strong></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('925072');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
<div class="PT10">
I know that I am loading only the image source, hence the video is getting loaded as an image.
Also, how to directly insert the video.html in the blog.
Kindly help me on this.
Thanks.
Updated:
Is it possible to load video through the html file which I am creating? I mean, if I can extract the content server of the video, then, will the video be playable through an html file? Thanks.
Updated:
I have modified the code a bit, and directly added the video url:
<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"></span><strong>Watch Video</strong></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
<div class="PT10">
I thought that by doing this, the video will be playable, directly with an HTML file, which late, I will use in the blog.
But still, the issue is not resolved.
Kindly let me know where am I wrong, even if this means, refactoring the ajax request from the moneycontrol page, though I have no idea on Ajax scripting.
Thanks.
After reviewing the source HTML of the page, I found that when the play button clicked, there will be a ajax request to get the real video embed code. In your case, this code is
<div style="z-index:0;" id="player">
<embed width="468" height="351" flashvars="servicetype=chunk&streamurl=2013Jul/manoj_variuousstocks_25jul.mp4&totalchunk=4&videopart=&server=http://videos.moneycontrol.com/web18/mc-vods/&controllerpath=http://img.moneycontrol.co.in/tv/flash/control_moneycontrol_chunk_24July.swf&autoplay=1&showrelatedbutton=0&relatedPath=http://api.moneycontrol.com/solr/solr_related_videos_multiple_test.php?id=925072%26format=player&site=www.moneycontrol.com&trackingurl=http://vtracking.in.com/TackImg_CHK_VOD.PNG&googlepreroll=0&googlepostroll=0&googleoverlay=0&channelindex=3&vastpreurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1211%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&vastposturl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1214%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&vastoverlayurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1213%26d%3D83%26s%3D11%26v%3Dvast2%26z%3D" allowscriptaccess="always" wmode="transparent" allowfullscreen="true" quality="high" bgcolor="#ffffff" name="videoPlayer" id="videoPlayer" style="undefined" src="http://img.moneycontrol.co.in/tv/flash/Main_chunk_24July.swf" type="application/x-shockwave-flash">
</div>
For more details ,the ajax request handler is located at http://www.moneycontrol.com/mccode/news/article/load_video_ajax.php`. You can see it in the javascript
function load_vplayer(auto_num)
{
if(navigator.userAgent.match(/iPad/i) != null)
{
window.location="http://www.moneycontrol.com/tablet/index.php?v_autono="+auto_num;
}
else
{
$.ajax({
type: "POST",
url: "/mccode/news/article/load_video_ajax.php",
data: {auto_num:auto_num},
timeout:5000,
error: function(jqXHR, exception) {},
success: function(data){
if(data!='')
{
$("#load_player").html("");
$("#load_player").html(data);
}
}
});
}
}
Another problem is the flashvar property which locating the video location. As you can see in the embed code, the flash player use relative url as input. Therefore, I afraid that you can not embed video from this site just by using its own HTML.
Updated
In the ajax respond, the video uri is located in two segment:
The server server=http://videos.moneycontrol.com/web18/mc-vods/
The video relative url streamurl=2013Jul/manoj_variuousstocks_25jul.mp4
With the above data, the full url of the video is http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4. You can use it with another player as in my demo to load the video.