Sunday, 15 March 2015

Javascript/jQuery - replace a video iframe with a placeholder image -


I have a question about this piece of code given by very useful people, but now I have another one Slightly different I have a placeholder image that sits in a carousel slide, which is clicked, YouTube Video is replaced by the default YouTube iframe embed.

I would like to do when the user clicked on the image and video is played, when they are embedded video if you click away from the carousel slides (for example, clicking on a Carousel arrow or dotting page) Resets it back to how it was before the video was displayed.

I hope this makes sense. Actually, I need this code for engineering so that the video is replaced with another element / div by this placeholder image again on a reverse HTML need

here.

  & lt; Div class = "youtube_video" & gt; & Lt; Img src = "img / video_poster_carousel.jpg" width = "986" height = "308" & gt; & Lt; -! & Lt; Iframe width = "986" height = "555" src = "https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" Fremborder = "0" Swicaryslskrin & Gt; & Lt; / Iframe & gt; - & gt; & Lt; / Div & gt;  

and CSS:

  / * video * / .youtube_video {status: relative; Padding-floor: 31.65%; Height: 0; } .youtube_video img {status: complete; Display area; Top: 0; Left: 0; / * Width: 100%; Height: 100%; * / Z-index: 20; Cursor: indicator; } .youtube_video: {content: ""; Status: Completed; Display area; Background: URL (play-button page) no-repeat 0; Top: 45%; Left: 45%; Width: 46px; Height: 36px; Z-index: 30; Cursor: indicator; } .youtube_video iframe {status: complete; Top: 0; Left: 0; Width: 100%; Height: 100%; } / * Image Poster Clicked, JS * / .youtube_video.player img {display: none; } .youtube_video.player: after {display: none; }  

and javascript: ". Youtube_video"

  $ (function () {var video = $ (); videos.on ( "click" function () {var elm = $ (this), conts = elm.contents (), take = conts.length, IFR = for null; (var i = 0; i & LT; le; i ++) {if (conts [i] .nodeType == 8) IFR = conts [i] .textContent ;.} elm.addClass ( "player") HTML (IFR); Elmkoff ( "Click");});} );  

This bottom line actually uses an internal HTML which means that lost your IGG tags move IMG tag out youtube_video container and a hide and youtube_video container and IMG tag

elm.addClass ( "player") HTML (IFR) To show the mechanism.

No comments:

Post a Comment