Jump to content

video en background

darkchris11
 Share

Recommended Posts

darkchris11 Newbie

darkchris11

Posted
Posted

Bonjour,

 

Tout d'abord, je précise que je travaille sur la version 1.4.7.3 de prestashop.

 

Donc tout est dans le titre, je souhaiterai mettre en background une video pour la page d'accueil de mon site.

 

J'ai donc cherché d'abord en HTML5 ce qui se faisait en gratuit, j'ai trouvé celui - ci : http://syddev.com/jquery.videoBG/

 

il permet également d'afficher une video dans un div ce que je souhaite faire.

 

pour tester, j'ai fait une page html basique et tout mis dans un dossier, çà marche très bien.

 

Donc maintenant intégration dans prestashop, et là, çà se complique ( sinon, je ne serai pas en train de poster :).

 

donc j'intègre les fichiers JS et CSS nécessaire au fonctionnement de la video en background dans une surcharge de la classe FrontController

 

comme ceci :

 

<?php
class FrontController extends FrontControllerCore
{

public function setMedia()
{
 parent::setMedia();
 Tools::addCSS(_THEME_CSS_DIR_.'jquery.lightbox-0.5.css');
 Tools::addCSS(_THEME_CSS_DIR_.'style.css');
 Tools::addJS(_THEME_JS_DIR_.'jquery.js');
 Tools::addJS(_THEME_JS_DIR_.'jquery.lightbox-0.5.js');
 Tools::addJS(_THEME_JS_DIR_.'jquery.videoBG.js');
 Tools::addJS(_THEME_JS_DIR_.'jquery-1.5.1.js');
 Tools::addJS(_THEME_JS_DIR_.'script.js');
}

}

 

ensuite, je précise que je me sert du module editorial sur ma page d'accueil, donc dans ce module j'ai :

 

<div id="conteneur"><a href="./cms.php?id_cms=8"><img id="cmdprofessionnel" src="./img/cms/cmdprofessionnel.jpg" alt="" /></a></div>

 

donc un simple div avec 2 boutons images, jusque là çà va.

 

mon code pour le div conteneur que j'ai mis dans le fichier editorial.css pour l'instant ( ce code étant fait pour afficher la video dans un div )

 

#conteneur{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 2;
}

 

et le code de ma page d'accueil, une fois affichée ( code source sous firefox ), si çà peut aider.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 <title>Polygone Onze</title>
 <meta name="description" content="Boutique propulsée par PrestaShop" />
 <meta name="keywords" content="boutique, prestashop" />
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="http://127.0.0.1/boutique/img/favicon.ico?1334388767" />
 <link rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1/boutique/img/favicon.ico?1334388767" />
 <script type="text/javascript">
  var baseDir = 'http://127.0.0.1/boutique/';
  var static_token = 'e7b7aa5ff3a09245c42991552de2175e';
  var token = '8582a2b5c0f8defa69f0e17ab999f959';
  var priceDisplayPrecision = 2;
  var priceDisplayMethod = 0;
  var roundMode = 2;
 </script>
 <link href="/boutique/themes/prestashop/css/global.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/style.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/modules/blockpaymentlogo/blockpaymentlogo.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/modules/blockcart/blockcart.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/modules/editorial/editorial.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/modules/blockcategories/blockcategories.css" rel="stylesheet" type="text/css" media="all" />
 <link href="/boutique/themes/prestashop/css/modules/blockcms/blockcms.css" rel="stylesheet" type="text/css" media="all" />
  <script type="text/javascript" src="/boutique/js/jquery/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="/boutique/js/jquery/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="/boutique/js/tools.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/jquery.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/jquery.lightbox-0.5.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/jquery.videoBG.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/jquery-1.5.1.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/script.js"></script>
 <script type="text/javascript" src="/boutique/modules/blockcart/ajax-cart.js"></script>
 <script type="text/javascript" src="/boutique/themes/prestashop/js/tools/treeManagement.js"></script>
  <link href="http://127.0.0.1/boutique/modules/crollcustomcss/css/global.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body id="index">
 <div id="page">
  <!-- Header -->
  <div id="header">
<a id="header_logo" href="http://127.0.0.1/boutique/" title="Polygone Onze">
 <img class="logo" src="http://127.0.0.1/boutique/img/logo.jpg?1334388767" alt="Polygone Onze" width="940" height="87"  />
</a>
<div id="header_right">

</div>
  </div>
  <div id="columns">
<!-- Left -->
<div id="left_column" class="column">

</div>
<!-- Center -->
<div id="center_column">

<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">
   <div class="rte"><div id="conteneur"><a href="./newproducts.php"><img id="cmdparticulier" src="./img/cms/cmdparticulier.jpg" alt="" /></a><a href="./cms.php?id_cms=8"><img id="cmdprofessionnel" src="./img/cms/cmdprofessionnel.jpg" alt="" /></a></div></div></div>
<!-- /Module Editorial -->

  </div>
<!-- Right -->
<div id="right_column" class="column">

<!-- Block CMS module -->
 <!-- /Block CMS module -->
</div>
  </div>
<!-- Footer -->
  <div id="footer"></div>
 </div>
 </body>
</html>

 

Bref, çà n'affiche rien et je tourne en rond, si quelqu'un à une idée ou un code qui marche pour afficher une video dans une div, je vous en suis déjà reconnaissant.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...