I have a youtube embed code here: <iframe width="560" height="349" src="http://www.youtube.com/embed/F_sbusEUz5w" frameborder="0" allowfullscreen></iframe>
that I'd like to display using a modified version of lightbox 2 called lytebox, found here:
http://www.dolem.com/lytebox/
Thanks in advance.
Try this,
Click here to view the video.
Easiest one is : Save your iframe in different html page and load this page by lytebox
<a href="http://yoursite.com/yourpage.html" rel="lyteframe" title="title"
rev="lytebox styling">Your video name</a>
You can also use embed link directly instead of page
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 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.
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'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?
Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');
You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/
I am using iframe to show my database result.But for the veryfirst time since I am not hitting the database so in that case iframe is showing datatable.jsp page is not available (dataTable.jsp is the page for showing database table result).I searched in google and i found something called onError and onLoad methods for iframe.If anybody can show me a small example of how to show a different jsp if for the first time required src is not avaialable it would be a great help for me.
Thanks in advance
<iframe id="dataframe" src="dataTable.jsp" name="dataTable" width="720px" height="620px" align="middle" frameborder="0">
</iframe>
Well, with javascript, this could be a way:
HTML:
<iframe id="dataframe" name="dataTable" width="720px" height="620px" align="middle" frameborder="0">
</iframe>
(removed the src attribute)
Then, when you want to load the datatable with your jsp content
JS:
document.getElementById("dataframe").src = 'dataTable.jsp';
Hope this helps, Cheers