I am attempting to use the MaterializeCSS tooltip in oder to display a youtube video. I have set the html attribute in the jQuery to 'true' and added the embedded iframe code into the data-tooltip attribute in the HTML.
I am having issues with the quotes inside of the html iframe code, they are preventing the tags from closing. I tried escaping the quotes with the " syntax but all that did was display the html text instead of actually running the code inside of the tooltip. I've tried single quotes outisde with double quotes on the inside and that only shows a small thin blank box. I'm assuming that means the html is running but not displaying anything. Does anyone know what the problem is?
jQuery
$('.test-tooltip').tooltip({
delay: 50,
html: true,
});
HTML
<a class="test-tooltip" data-tooltip="<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>"
You can add another div or element as the video container and add it to the popover as a return of a jQuery function.
jQuery:
$('.test-tooltip').popover({
delay: 50,
html : true,
content: $('#youtube_container')
}
});
HTML:
<a class='test-tooltip' data-placement='top' title="Title" href='#'>Click</a>
<div id="youtube_container" style="display: none">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
It should work.
Related
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?
Hi I am working on a project that is based on asp and javascript. Also I am new to both programming languages.
I created a popup window that displays a video. When you hit its "close" button, the popup would close but the audio kept playing in the background.
With this code now my audio stops. But it leads to another issue.
So here is the code.
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
I created a javascript variable - to copy the 'iframe src' value to it.
<script type="javascript">
var addurl = document.getElementById('#pict').src;
</script>
Then for 'onclick' in my span, I empty the src (so that the audio stops) and re-add the above variable value back in the src.(so that the user can play the video again in the same session)
onclick= ""$('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
I dont think the 'addurl' variable is working correctly here. AS I can't play the video twice in the same session. Its blank the second time.
How can I add iframe (src) value inside a variable??
I would appreciate if I could get any help to solve this problem.
As mentioned in my comment above, you have an extra > that closes your <iframe> before you set you id, width, height and other attributes. You simply need to remove the extra > and all should be fine.
Simple Demo
<iframe> id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
^ - Remove this
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
It looks like you also have some extra quotes "" inside of your javascript and miscellaneous &s.
onclick= ""$('#pict').attr('src','');
^^ - Remove the quotes
onclick= $('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
^ ------ ^ --- ^^ - Remove the `'`s `&`s and quotes
$('#pict').attr('src',addurl);>
Well, it seems a bit confusing. You have some options here, so I give you a few pointers on how to understand the code better.
If you are working inside the page content, you can insert ASP code like this:
<p>lorem ipsum: "<% =my_value %>" is my value</p>
In your code, it looks, as if you are inside a script block, building a string:
<%
dim some_asp_variable
dim my_value
some_asp_variable = "<p>Lorem ipsum: """ & my_value & """ is my value</p>"
Response.write some_asp_variable
%>
Note, how you have to write double quotes to put one quote in the string. and use & to concatenate the strings.
The part you have given:
onclick= ""$('#pict').attr('src','');$('#pict').attr('src','"& addurl & "');"" >
is correct, but only if you are composing a string in ASP (the second option).
I have a quite peculiar problem with some jQuery code.
Basically I'm trying to work out a video mirror script where you click on a button and the div should change embed code to another video service. This is my code:
jQuery(function($){
$('#mirror1').click(function(){
$('#player-embed').html($('<div />').append($('#video1').clone()).html());
});
});
This is the code for the button
function mirror1( $atts, $content = null ) {
return '<a class="wpb_button_a" title="Mirror 1" href="#mirror1" id="mirror1">
<spanclass="wpb_button wpb_btn-primary wpb_regularsize">Mirror 1</span></a>
<div id="video1" class="video1">' . $content . '</div>';
My problem is that the output gives excessive " quotations
So all I'm seeing is (on page, not in code)
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
And not the actual video itself.
Thanks in advance.
Your code:
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
Your ” and ″ are typographic quotes and not code quotes, code quotes are straight like "
Try:
<iframe frameborder="0" width="480" height="270" src="videourltest" allowfullscreen> </iframe>
I'm using JS to build some HTML that includes the new iframe syntax from YouTube.
When someone clicks a link on the page to a YouTube video, JS checks the document size and if it's big enough, will open up a lightbox-style box on the page and play the video there.
When I test it out, it opens the HTML but the space is just white and the source code shows an empty <iframe> element.
Is there a problem with trying to dynamically add an iframe to a page?
Here is the relevant part of the JS:
iframe = '<iframe width="'+defaults.width+'" height="'+defaults.height+'" src="'+vidsrc+'" frameborder="0" allowfullscreen></iframe>';
container = '<div class="videopow-overlay"><div class="videopow-container">' + iframe + '</div></div>';
$("body").prepend( container );
Here is what gets output:
<div class="videopow-overlay">
<div class="videopow-container">
<iframe width="800" height="485" src="http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1" frameborder="0" allowfullscreen="">
<html><head></head><body></body></html>
</iframe>
</div>
</div>
Change vidsrc from:
http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1
to
http://www.youtube.com/embed/phzvyIQWCo8?hd=1
I have a few a tags with the name video_button_a
<a id="first_video" class="video_button_a" href="#"></a>
<a id="second_video" class="video_button_a" href="#"></a>
When I click on any of these links i need to embed this in between
<embed
src="http://reelworks.net/player.swf"
width="480"
height="200"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="swfMovie=http://www.reelworks.net/video/runningsahara400x200.flv&swfThumb=http://www.reelworks.net/video/green.jpg&play_btn_scale=.65&playover_color=d7d3c0&playbk_alpha=.65&playbk_color=d7d3c0&play_color=1a1a1a',"
/>
I was thinking append but i didnt know the syntax
$('.video_button_a').click(function(){
// code goes here
});
Is append the way to go and if so how do I start the video, is there a way to put that code on the page and start the video
try this:
$('.video_button_a').click(function(){
$('#player').html('<embed src="http://reelworks.n.... />');
//return false (if you want to)
});
I don't know if you want to embed the code inside the "a" tag which I don't think it is a good idea since it is a flash video - that is why i have a "player" id for a separate div. You could also create something like this:
html
<div id="first_video" class="video_button_div"></div>
<div id="second_video" class="video_button_div"></div>
js
$('.video_button_div').one('click', function() {
$(this).html('<embed src="http://reelworks.n.... />');
//return false (if you want to)
});
css
.video_button_div {
cursor:pointer;
//etc
}
I hope this helps!