I am trying to create a splash page in WordPress (which I have done), but the video I would like to play isn't being located by the browser.
This works when not in WordPress. But once inside WordPress, it's not. Here's my code:
<?php
/*
Template Name: Splash
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iron Triangle Films Splash Page</title>
<link rel="stylesheet" href="css/styles.">
<style>
.mainContent{
width: 50%;
margin-left: 250px;
}
</style>
</head>
<body>
<div class="mainContent">
<video id="my_video" height="500" width="700" autoplay>
<source src="<?php echo get_bloginfo('template_directory');?> itf.mp4" type="video/mp4">
<source src="<?php echo get_bloginfo('template_directory');?> itf.ogv" type="video/ogg">
<p>Your browser does not support HTML5 video.</p>
</video>
<p style="text-align: center;">This site is currently under development and will be back online shortly.</p>
</div><!--End Main Content div-->
</body>
</html>
The following line of code in the video source:
<?php echo get_bloginfo('template_directory');?>
Was suggested by someone, but this did not work.
The site is www.irontrianglefilms.com
I'd appreciate your assistance this is day#2 trying to tackle this issue.
Chris Mazzochi
Try with this one, remember to add the "/" after calling the functions to get a directory.
<?php
/*
Template Name: Splash
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iron Triangle Films Splash Page</title>
<link rel="stylesheet" href="css/styles.">
<style>
.mainContent{
width: 50%;
margin-left: 250px;
}
</style>
</head>
<body>
<div class="mainContent">
<video id="my_video" height="500" width="700" autoplay>
<source src="<?php echo get_bloginfo('template_directory');?>/itf.mp4" type="video/mp4">
<source src="<?php echo get_bloginfo('template_directory');?>/itf.ogv" type="video/ogg">
<p>Your browser does not support HTML5 video.</p>
</video>
<p style="text-align: center;">This site is currently under development and will be back online shortly.</p>
</div><!--End Main Content div-->
</body>
</html>
Related
I am developing my first PHP webapp on localhost. I am unable to refer to files in my sub-directories. For example, from any page of my project, if I have to call the following page, the image doesn't appear.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page is Under Construction</title>
</head>
<body>
<style>
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: center;
}
</style>
<div class="imgcontainer" style="padding:0px;">
<img src="/myProjectRootFolder/images/under-construction.png" alt=""/>
</div>
</body>
</html>
The error message on Console is
UnderConstruction.php:25 GET http://localhost/myProjectRootFolder/images/under-construction.png 404 (Not Found)
could be you need a relative path
<img src="./myProjectRootFolder/images/under-construction.png" alt=""/>
or
<img src="./images/under-construction.png" alt=""/>
and be sure of your real image and pathnames ..
if your url for invoke the page is
/myProjectRootFolder/summary/salessummary.php
you should use the relative path
<img src="../images/under-construction.png" alt=""/>
then you should use
So I'm trying to set the body background tag to a php variable I created, however I can't get it to correctly work.
Here is the simple PHP:
<?php
$backGround = "images/backgrounds/grey.png";
?>
and here is the HTML I tried which none worked.
<body background="<?php echo $backGround; ?>">
<body background="<?php echo htmlspecialchars($backGround); ?>">
I found these from preview stack overflow questions but they were about setting PHP variables to image sources. I would have thought it would apply to this as well.
Here's my entire PHP page using some of the suggestions but yet to still work.
<?php
$backGround = "images/backgrounds/grey.png";
?>
<html>
<head>
<title>Exodus</title>
<link rel=StyleSheet href="styles/main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<!-- JS Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/fader.js"></script>
</head>
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<div class="pre-wrap">
<div id="container">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
</div>
<div class="wrap">
<p>Test</p>
</div>
</div>
</body>
First of all - using backgound attribute is not recommended by W3C.
What you really need is inline style:
<body style="background-image: url('<?php echo $backGround; ?>')">
check this it will work
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<body style= 'background-image: url("<?php echo htmlspecialchars($backGround); ?>")'>
I have a video folder that contains MP4 videos. My PHP code looks into that folder and gets the name of one video and populates an HTML5 video element with the name.
$fname = $files[0];
[0] In the php represents the first MP4 video. If i change this to [1] it will populate the video tag with the second mp4 video, and if I change it to [2] it will get the next MP4 video name.
This all works as I only have 3 MP4 videos in the folder. But what I need is a redirect if it can't find a video in the folder.
At the moment, if I take out one of the videos from the folder, I get a php error:
NOTICE: Undefined offset: 3 in C:\xampp\htdocs\video1.php on line 18.
<!DOCTYPE html>
<html>
<head>
<title>Tv Web Video1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
</head>
<body bgcolor="#A9A9A9">
<div id="wrapper">
<div id="content">
<div>
<?php
$files = glob('videos/*.mp4'); // get all .mp4 files from folder
$fname = $files[0]; // get 1st filename
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp4'))); // format text for display
?>
<video id="video" class="box" poster="poster.jpg" preload="metadata" controls muted width="100%"
max-width:500px; height="50%" max-height:500px; autoplay onended="window.location = '/video2.php';">
<source src="<?php echo $fname; ?>"/>
</video>
<div id="infobox" class="box">Video: '<b><?php echo $ftext; ?></b>'</div>
<ul id="playlist" class="box">
</div>
</div>
</body>
</html>
Use empty()
<!DOCTYPE html>
<html>
<head>
<title>Tv Web Video1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
</head>
<body bgcolor="#A9A9A9">
<div id="wrapper">
<div id="content">
<div>
<?php
$files = glob('videos/*.mp4');
$fname = $files[0];
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp4')));
if(!empty($files))
{
?>
<video id="video" class="box" poster="poster.jpg" preload="metadata" controls muted width="100%" autoplay onended="window.location = '/video2.php'">
<source src="<?php echo $fname; ?>"/>
</video>
<div id="infobox" class="box">Video: '<b><?php echo $ftext; ?></b>'</div>
<ul id="playlist" class="box">
</ul>
<?
}
else
{
header("Location: http://example.com/myOtherPage.php");
}
?>
</div>
</div>
</body>
</html>
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
I opened this thread because I tried a lots of methodes I found here or elswhere to insert my custom stylesheet into an iframe with jQuery but none of them worked.
And now I'm stuck.
I'm open for any suggestion, for me it's not necessary to do it with jQuery if there is any other souliton.
this is what I have now:
<!doctype html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title><?php echo $this->title; ?></title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="js/mootools-more.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#iwiw').load(function(){
$('#iwiw').contents().find('head').append('<link href="css/iwiw.css" rel="stylesheet" type="text/css" />');
});
});
</script>
</head>
<body>
<header><!-- content --></header>
<div id="container">
<div id="left">
<iframe id="iwiw" src="http://iwiw.hu/like.jsp?u=<?php echo $url; ?>&title=<?php echo str_replace('+', '%20', urlencode($this->title)); ?>&t=tetszik&s=white" width="220px" height="120px" style="border: none;" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="right"><!-- content --></div>
</div>
<footer><!-- content --></footer>
</body>
in the code $url is the current url encoded with urlencode and $this->title is the current page title and as you can see my document type is html5 and what you don't see is that the iframe's SRC is XHTML transitional.
Actually the iframe is the original working code if you would like to test it, just replace $url with your site's url and the $this->title with your site's title.
You cannot do that unless the current page is also from iwiw.hu. There is a cross-domain limitation, you cannot touch the output inside the <iframe> you created if it's outside your domain.
Some answers here ... unless the iframe domain defers from the main page.
How to apply CSS to iframe?