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="...>.
Related
I have a website on WordPress, I do have infoboxes created and would like to give a share button down below each box and link it with the box to share only the contents of the box instead of the whole page. Each div has it's own ID defined however there is no predefined link for each of them.
Any way, I can create a share button and link this infobox with it using the ID to share? I want to make these boxes shareable.
In facebook documentation to create a share link button it says
Pick the URL of a website or Facebook Page you want to share.
https://developers.facebook.com/docs/plugins/share-button/?locale=en_US
So if you want to share something you must have a link to share.
You can create a specific page about your infoboxes and share the link of your-website/the-infobox.
If you manage to make a link your code for the share button will look like this
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Or
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0" nonce="qXOmpYBu"></script>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
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?
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 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
I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?
The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();
html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();