iFrame link in <a href="link.html"> - javascript

How do I set up this link as below with using iFrame but without a video itself but name e.g. Interview video
Here is a iframe of have as below:
<iframe width="400" height="225" src="http://www.youtube.com/embed/G_G8SdXktHg" frameborder="0" allowfullscreen></iframe>
to in this as below:
<div class="toogle_wrap_intro">
<div class="trigger">Browse video categories</div>
<div class="toggle_container_video">
<ul class="lists_video">
<li><a href="video/aps_production.mp4"><p>Interview video</span></p></li>
</ul>
</div>
</div>
This is for iPhone and jQuery1.8.1. What is the correct way to set up a video link via for a drop down menu and when a video finished playing it will go back to the same page.

I am guessing that you are using a frame because you want to hold the video in a certain place? I would suggest using the <video> tag in html5 instead of iframe.
<video width="400" height="225" controls="controls">
<source src="video/aps_production.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

give the iframe an id and target it in the link's url: iframe id="iframe" and then append #iframe to the url of the document the link is in. a href="url.html#iframe"

Related

How can i have a page with a Iframe/Html5 Video and a Read More Button whose src and href value can be changed with the help of javascript?

I have a page on my site(blogger) on which I want to have multiple video/iframes and a button for more info about the videos. But having so many videos/iframes on one page may impact the site's SEO and Loading Time and also the look.
So I want to have only one video/iframe and a Read More button on the page with more navigation links below it for easy navigation to other videos.
Here's my Code:
<!-- if there's a video -->
<video id="video-id">
<source src="" type="video/mp4">
</video>
<!-- if there's an iframe -->
<iframe class="responsive-video" src="" allowfullscreen scrolling="no" allow="encrypted-media">
<button class="read-more" href="">Know More About This</button>
<hr style="opacity:0.2;">
<button class="btn-class" href="#" data-video="https://site.xyz/video-src.mp4" data-btn="https://site2.xyz/btn-href/">Video 1</button>
<!-- And Other Buttons Like This -->
Can you please tell Me the javascript that can be uses in this case. Also I'm new to javascript, so please be specific in your answer.
Thanks.
Simply change the src of video and href on anchor on click of the button 'Video 1'
function playVideo() {
//Change video src
document.getElementById("video-id").src = event.target.getAttribute('data-video')
//Change anchor's href
document.getElementById("read-more-btn").href = event.target.getAttribute('data-btn')
}
.read-more {
text-align: center;
}
<video id="video-id">
<source src="" type="video/mp4">
</video>
<div class="read-more">
<a id="read-more-btn" href="">Know More About This</a>
</div>
<hr style="opacity:0.2;">
<button class="btn-class" onclick="playVideo()" href="#" data-video='https://www.w3schools.com/tags/movie.mp4' data-btn="https://site2.xyz/btn-href/" data-video="">Video 1</button>
<!-- And Other Buttons Like This -->

how to float video playing inside an iframe src on scroll ( when video goes out of viewport )

My use case is simple as shown in this codepen for direct video tags
<section class="videowrapper videoTag">
<div class="gradient-overlay"></div>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
<video class="initial_video" loop="" controls="">
<source id="" src="https://d2cstorage-a.akamaihd.net/atl/Brunomars/Bruno-VersaceOnTheFloor.mp4" type="video/mp4">
</video>
</section>
The only difference is that I have a mix of direct video and iframe tags.
<div class="video-wrapper">
<iframe src="https://codepen.io/technotech/full/poRqdvN"></iframe>
</div>
i.e.
I have multiple iframes which have src URL as HTML/page (video are in this HTML/page). Once the page(containing multiple iframes and direct video tags) gets loaded, the user clicks on any one video(either direct video tag's video or iframe's video) to play and if it goes out of viewport then it should float.
if another video gets played while 1st one is floating, then 2nd video should replace 1st one on the float position if 2nd video goes out of the viewport
here is the codepen2 which I created for my use case. I tried the way used in the above codepen for direct video tags but it's not working for iframe HTML src videos as it's not able to inject events and id to those videos I guess.
please excuse me if I missed something.

How can I change an image by a video on hover

I would like to do something pretty similar to the netflix page on the browser.
I got an image, when it's hovered, its scale change but I would like to replace the image by a playing video with the song. I've tried to disable/enable on hovering but I got a problem: Its always the same video which is playing (surely because I've used the same id).
I've used JQuery to detect the hover then play the video, and a getElementById to get the video itself...
Here is my javascript code:
$(document).ready(function(){
$('a').hover(function(){
Show()
Play()
}, function(){
Pause()
UnShow()
});
});
const myVideo = document.getElementById("video");
function Play() {
myVideo.play();
}
function Pause() {
myVideo.pause();
}
And my HTML code:
<body>
<nav>
<div class="logo"><h1>My Guitar Site</h1></div>
<div class="search">
<input type="text">
</div>
</nav>
<div class="ensemble">
<div class="song">
<a href="" class="a-song">
<img src="Images/LetMeDownSlowly.jpg" alt="">
<video id="video" width="120">
<source src="Video/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
<h5 class="artistenom">Alec Benjamin - Let Me Down Slowly</h5>
</div>
<div class="song">
<a href="" class="a-song">
<img src="Images/CurduroyDreams.jpg" alt="">
</a>
<h5 class="artistenom">Rex Orange County - Corduroy Dreams</h5>
<video id="video" width="120">
<source src="Video/test2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
Thanks for your help
Im not big on jQuery but here's the general concept. You can add the poster attribute as follows. That should show the image.
<video controls poster="/images/cool-image.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"
</video>
Assuming you have an event for hovering on and another for hovering off you can do the following:
Hover on
Play the video and remove the poster attribute:
function Play() {
var poster = $(vid).attr("poster");
$(vid).attr("poster","");
myVideo.play();
}
Hover off
Stop the video and add the poster attribute:
function Pause() {
var poster = $(vid).attr("poster");
$(vid).attr("poster", "poster.png");
myVideo.pause();
}
Again Im not a jQuery guy but generally I believe that will work.

How to add youtube video without embedded

Im trying to add youtube video in my webpage using below mentioned code, is
there anyone who can help me with that.? have a look on my code below.
<div style="width:400px; height:200px;">
<embed src="https://www.youtube.com/watch?v=Q-AV9KMLTFc" wmode="transparent"
type="application/x-shockwave-flash" width="100%" height="100%"
allowfullscreen="true" title="Adobe Flash Player">
</div>
Use the code that Youtube generates for you after clicking share > embed. It looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q-AV9KMLTFc" frameborder="0" allowfullscreen></iframe>
Set width and height to whatever values you like.
You could do it with <iframe> like this:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8">
</iframe>
With Autoplay:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8?autoplay=1">
</iframe>
Note: After "embed/" in src, be sure to write the correct youtube video id which can be found in the URL link after "=" symbol.
Ex: In this link, https://www.youtube.com/watch?v=vEROU2XtPR8
Youtube video id="vEROU2XtPR8".
Be sure to give the width and height properties of the video size that should be displayed on the screen.

Video not autoplaying inspite of using "autoplay" in the video tag of HTML

The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.

Categories