I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/
Related
I know that this has been asked many times, but I open this discussion to solve my problem and to summarize all we know about this topic to help people in the future.
So, let's go.
We want to upload a video (e.g. from YouTube). We can do this pasting the video url or using the MediaEmbed button.
We have two possibility.
We can set or not in our editorConfig
mediaEmbed: { previewsInData: true }
WITHOUT previewsInData: true we obtain something like this:
<figure class="media">
<oembed url="https://www.youtube.com/watch?v=something"></oembed>
</figure>
Instead WITH previewsInData: true we obtain something like this
<figure class="media">
<div data-oembed-url="https://www.youtube.com/watch?v=vsl3gBVO2k4&ab_channel=H%C3%A9lderPalma">
<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">
<iframe src="https://www.youtube.com/embed/vsl3gBVO2k4" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
</figure>
In both cases i'm able to see the preview of the youtube video in my CKEditor.
But when I save the content of the editor and I get that to display it in my presentation page the video is not displayed.
Reading the other discussions here on the forum I couldn't figure out if this is just my problem or not. Many solutions concerning adding previewsInData: true in editorConfig, but for me absolutely nothing changes.
I think that the tag figure and the oembed div is useful to CKEditor to display a preview of the video. We know that this preview is like a picture, you can't play the video, you can't open in a new page, etc. This is ok, but i want to see the video in my presentation page.
So, where is the problem?
Is there something to change on the presentation page to have the video displayed?
Should I search for the figure tag and replace it with an iframe server side?
Any ideas?
I hope we can find a permanent solution to this problem.
You should indeed use a 'frontend' to display the oembed tags, like it says in the manual on : https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#displaying-embedded-media-on-your-website
You can provide your own mediaprovider using this :
ClassicEditor
.create( editorElement, {
plugins: [ MediaEmbed, ... ],
mediaEmbed: {
extraProviders: [
{
name: 'extraProvider',
url: /^example\.com\/media\/(\w+)/,
html: match => '...'
},
...
]
}
} )
.then( ... )
.catch( ... );
and the html could be something like :
...
html: match =>
'<div style="position:relative; padding-bottom:100%; height:0">' +
'<iframe src="..." frameborder="0" ' +
'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
'</iframe>' +
'</div>'
you can find more in de docs, here :
https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedProvider.html
you could also do something like this yourself, avoiding external oembed providers:
window.addEventListener('load', function(){
document.querySelectorAll('oembed[url]').forEach( element => {
// get just the code for this youtube video from the url
let vCode = element.attributes.url.value.split('?v=')[1];
// paste some BS5 embed code in place of the Figure tag
element.parentElement.outerHTML= `
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/${vCode}?rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>`;
});
})
You would ofcourse have to upgrade the script for all different versions of embedded content, this example will just work for youtube. You would have to analyze the URL from the oembed tag to check what is embedded so you can add the right code for each variant.
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
actully i m trying to use anchor tag with this slider image
<div class="smallsliderdiv">
<p class="smallslider"> Top websites </p>
<div id="makeMeScrollable">
<img width="400px" height="300px" src="g1.jpg"/>
<img width="400px" height="300px" src="g2.jpg"/>
<img width="400px" height="300px" src="g3.jpg"/>
<img width="400px" height="300px" src="k1.jpg"/>
<img width="400px" height="300px" src="k2.jpg"/>
</div>
<div>
but its not working images are not getting showed when i do like this? i dont want the alternative way .. what is the problem with this slider?? last two images have no problem .. when i remove anchor tag all is fine but i need this. Thank you.
This is working fine with html but not with the slider i m using which is http://www.smoothdivscroll.com/demo.html use js and css from this site
and i am using for each loop for echoing image address and link address .
This is how I would do it, since your .js or .css slider files probably has an issue with wrapping the images with an anchor tag, so instead of wrapping the images with an anchor you can add an onclick event to the img and have the javascript link the image. and manually change the cursor to a pointer in the CSS.
See fiddle for example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/47/
html
<img onclick="image1()" width="400px" height="300px" src="http://lorempixel.com/400/200/"/>
CSS
#makeMeScrollable > img:hover{
cursor: pointer;
}
Javascript
function image1(){
window.location.href = 'www.google.com';
}
I'm embedding a local video to my page using Bootstrap 3
I use this code inside the modal
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" height="300" width="480"
src="hunnybunny.mp4"></iframe></div>
How can I prevent this video from autoplay? I also want the video to stop when the modal window is closed.
I was having issues with this and found a workaround. Drop the iframe in the html, for example:
(Note: I wanted video on the left so i put it in a row in the first 7 columns, also the "class = left_vid" is defined in my "override" custom linked style sheet)
<div class="row">
<div class="col-md-7">
<video controls class= left_vid> <source src="vid.mp4" type="video/mp4">
This browser does not display this video type </video>
</div>
<div class="col-md-5">
<p> Text stuff </p>
</div>
</div>
In the style.css
.left_vid {
display:block;
margin-left:auto;
margin-right:auto;
width: 80%;
height:auto;
}
Is it necessary to use an iframe for this? If not have look at the HTML5 video-tag:
http://www.w3schools.com/html/html5_video.asp
You are using iframe, you can not stop playing, you can only remove element like this
$('#myModal').on('hidden.bs.modal', function () {
$( ".embed-responsive-16" ).remove();
})
This is just example, we dont have all you code :(
I am using Google's Audio player to play an MP3 on a webpage. My issue is that I am overlaying an image on top of the the play/pause button. Yet when the image is clicked nothing happens. What am I doing wrong? Here is the code:
<div class="center" style="width: 400px; z-index:1; visibility:hidden;">
<embed wmode="transparent" width="400" height="27"
type="application/x-shockwave-flash" flashvars="audioUrl=/sourcefile.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best"
></embed>
</div>
<img style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg" width="60" height="60"
alt="Play/Pause" />
I need to know how to trigger the flash button. I know it is possible with Javascript but I do not know how. Please provide examples.
UPDATE: Here is what I have tried at this point. Per Matt H recommendation I tried this code:
<input type="image" disabled style="position:absolute; left:323px; top:630px;
z-index:10000;" src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />
That did not work. One thing I noticed is if I have visibility:hidden; the flash player will not respoind to any clicks regardless of what is over it. With that said I attempted to overlay the image using <input> without the visibility:hidden; and it still did not work.
I need to get this fixed if at all possible. I am willing to use another flash player that is similar as long as it works correctly and will use an mp3 like above.
Looks like your image is catching the click that is supposed to go to the play button. You should add a handler for your image which returns true OR calls the player's play function.
Try this:
<input type="image" disabled style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />