I'm trying to accomplish something like this website
http://ilpvideo.com
As you can see any video that you click on,
takes you to that same page. The only difference is the video playing.
I'm trying to do the same for my website. here is my code
//index.php
<div class="thumbnail">
<a href="video.php?id=video1">
<img src="/local/images/vid_01.jpg">
</a>
</div>
<div class="thumbnail">
<a href="video.php?id=video2">
<img src="/images/vid_02.jpg">
</a>
</div>
<div class="thumbnail">
<a href="video.php?id=video3">
<img src="/images/vid_03.jpg">
</a>
</div>
This part here I can't quite understand yet.
When a video is clicked on index.php
I should send the user to video.php
and inside that iframe element it should only send the video id.
ex:
video1 is click then iframe should be src="media/video1.mp4"
video2 is click then iframe should be src="media/video2.mp4"
video3 is click then iframe should be src="media/video3.mp4"
//video.php
$id = $_GET['id'];
<section id="video-php">
<iframe src="media/<?php echo $id?>.mp4" allowfullscreen></iframe>
</section>
Updated my question.
I have another question.
How can make it so that when a unique video ID
is click, to also included the video title. Is there such tag in php
to make this happen?
You forgot the "echo" before your variable $id. I think that's why it didn't work.
You should use the video tag provided by HTML5. It allows you to insert a video content into your web page.
<?php
$id = $_GET['id'];
?>
<video width="320" height="240" controls>
<source src="media/<?php echo $id; ?>.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Related
I'm trying to embed an self hosted video into a wordpress page. This is a video hosted in the media library on the same wordpress install.
But I'm having difficulties getting the video to appear on the page, not on autoplay and with sound.
It seems to either:
appear with no play button (looks like a static image)
appear autoplaying but with no sound.
I've tried various settings on the page code to get this to appear like a regular video with a play button that's not set to autoplay but I'm stumped.
These were the settings when I came to change them
<div class="video-area">
<video width="100%" autoplay muted>
<source src="<?php the_field('video_section_video') ?>" type="video/mp4">
</video>
</div>
I then tried this:
<div class="video-area">
<video width="100%" muted="false" autoplay="false">
<source src="<?php the_field('video_section_video') ?>" type="video/mp4">
</video>
</div>
And I also tried changing the original default settings to removing autoplay and muted, but no combination of changes seems to have the effect I want.
It's either static and no option to start the video, or it plays automatically without sound. I understand browsers dont allow videos to autoplay these days with sound, but I just need it to appear like a regular video with a play button.
You are missing controls
<div class="video-area">
<video width="100%" muted="false" autoplay="false" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
For your reference: https://www.w3schools.com/html/html5_video.asp
I'm currently building a small PHP photo gallery system using lightbox.
My code:
<div class="col-7 offset-2 p-2">
<img src="uploads/entrance.jpg" alt="">
<?php foreach ($photos as $photo){?>
<a class="gone" href="<?php echo $photo->file_path('uploads',$photo->filename)?>" data- lightbox="gallery"><img src="<?php echo $photo->file_path('uploads',$photo->filename)?>" alt=""></a>
<?php } ?>
</div>
I wish to show the first indexed/id photo as the thumbnail/cover image. Once the user wishes to view the gallery, they can click the image and lightbox launches allowing a preview of the photos drawn from SQL.
How do I achieve this?
This may be quite an amateur question, but I'm meddling around with what I've learnt from youtube :P
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
I am doing a photo gallery with php, and my main page is a gallery with all thumbnail images. If you click on any thumbnail, it will link to another page with the original size image (like google images does). I do that with an hyperlink that contains an image inside :
<a href='".$row['image']."' class='image' title='".$row['title']."'>"."<img src=".$row['thumb']." class='thumb'/> </a>
Then if the user is now in the redirected page showing the big image selected, how can I do it so that if the user clicks on top of the big size image then it will be redirected to the main page with all the thumbnails?
<a href="<?php echo $row['image'];?>"class='image' title="<?php echo $row['title'];?>">
<img src="<?php echo ['thumb'];?>" class='thumb'/>
</a>
If you are able to link to a detail page using <a href, why are you not able to do the same from the detail page?
considering you are on listing page, say listing.php and images are listed from database. You can loop through the images as given below.
<a href="detail-image.php?id=<?php echo $image_from_database['id'];?>" class='image' title="image title">
<img src="<?php echo $image_from_database['thumb'];?>" class='large'/>
</a>
So, on clicking you will be redirected to detail-image.php where you can get the id using PHP $_GET/$_REQUEST
and then fetch the big image from database and show it. There you can do same to link to the listing page
<a href="listing.php" class='image' title="image title">
<img src="<?php echo $image_from_database['large_image'];?>" class='thumb'/>
</a>
Look I don't know exactly what's the problem,
but I think there wrong in your code,
must be like it,
<a href="<?php echo $row['image'];?>"class='image' title="<?php echo $row['title'];?>">
<img src="<?php echo ['thumb'];?>" class='thumb'/>
</a>
!! The page must be "Something.php"
Here is my problem, I had describe in code project. When I am clicking in an icon it try to open in new page for showing image or pdf or video. But, I don't like this. I like to show that files in my iframe in same page. How can I do this ?
My code project link is:
Please don't open in new page. Just stay in same page.
I could suggest using a plugin as it makes things easier.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Alternatively what you want is to change the iframe src.
Using jQuery, you could for example, do something like this
<iframe id="myframe" style="display:none" width="630" height="420"></iframe>
<div class="fileIcon">
<a class="click" onClick="" rel="gallery" href="#">
<img src="src" title="" width='100' height='100' alt="" />
</a>
</div>
And JS
$('a').click(function(e){
e.preventDefault()
var s = $(this).find('img').attr('src');
$('#myframe').attr('src', s).show();
});
FIDDLE
This will get the image src and more it to the iframe
Give your iframe a name="myframe" then in your target you would use target="myframe"